2

I'm using JQuery with a mobile site to reposition the header nav on scroll in the absence of position:fixed support. That works fine, when the user stops scrolling the header is placed back at the top of the page.

To enhance the experience for the user I want to hide() the header when the user starts to scroll and then have it slide in when they stop. The problem is that the scroll event only fires when the user stops scrolling. I've read that there are iOS specific touch events but is there any way I can capture a scroll start event on iOS and Android using mutually common code?

Thanks

Marcus
  • 357
  • 1
  • 4
  • 14

3 Answers3

5

I believe jQuery Mobile, can do this. Take a look at the following code:

$(document).bind("scrollstop", function() {

//What occurs when the scrolling stops
alert("You have stopped scrolling");
});

$(document).bind("scrollstart", function() {

//What occurs when the scrolling starts
alert("You have started scrolling");

});
ᴘᴀɴᴀʏɪᴏᴛɪs
  • 7,169
  • 9
  • 50
  • 81
  • Thanks, I should have thought of this, I can use some other JQuery mobile features on the site too. – Marcus Oct 25 '11 at 17:26
  • 3
    Actually, just to note, iOS doesn't allow any DOM manipulation after a scroll has started until it has stopped. So you can't remove the header on scrollstart unfortunately. – Marcus Oct 25 '11 at 20:31
2

You can start with jQuery Touchwipe : it's a plugin which add new events, wipeleft and wiperight.

It can be easily modified to change horizontal wipes to vertical ones (changing x's to y's) http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

It works on Android, IOS and BBOS.

mddw
  • 5,570
  • 1
  • 30
  • 32
  • I didn't know about this, will come in useful in future. Going to go with JQuery Mobile for this one though, I can use some of its other features. – Marcus Oct 25 '11 at 17:27
2

This scrollstart event is faulty in the default android browser for android 2.3.4 The scrollstart event doesn't fire 100% of the time when the user starts a scroll. I am trying to track down problem. I am looking for any event that fires just before the scrollstart event. It could also be a conflicting event somewhere in my code. I need to rule that out first.