Hide Menu on Scroll Down, Show on Scroll Up, Works in Chrome, Not in Safari (mobile)

Question

So I'm using this code to hide my navbar on scroll down, and show it as soon as the user scrolls up again.

It works great on desktop, all browsers, and it also works in Chrome on mobile (iPhone), but in Safari the slideUp / slideDown acts crazy, sometimes it shows, hides, shows hides the navbar several times before going away.

It's as if the event gets triggered multiple times.

Here's the working code

   var lastScrollTop = 0, delta = 5;
   $(window).scroll(function(event){
   var st = $(this).scrollTop();

   if(Math.abs(lastScrollTop - st) <= delta)
      return;

   if (st > lastScrollTop){
       // downscroll code
       $("#soulnavbar").slideUp()
   } else {
      // upscroll code
      $("#soulnavbar").slideDown();

   }
   lastScrollTop = st;
});

http://jsfiddle.net/5n630gs2/1/

And the website I'm using it on http://www.carbsanity.com/

Can someone tell me why it's acting like that on Safari, and if there's anything I can do about it? :-)

Thank you!

Answer 1

The problem is mobile browsers don't support the "real" scroll event. scroll event only fired after window stop scrolling. It does not react in time.

you need a third party to handle your scrolling, such as Iscroll.