CODEWITHSUNDEEP
javascriptiostouchmobile-safari
Caio Tarifa
Caio Tarifa

Reputation: 6043

Navbar show only when scrolling up in iOS

I'm using the Marius Craciunoiu technique to show my entire navbar when the user scrolling up.

So, this is my JavaScript (using jQuery) code:

var delta, didScroll, lastScrollTop, navbarHeight;

delta = 5;
lastScrollTop = 0;
navbarHeight = $('.navbar').outerHeight();

$(window).on('scroll touchmove', function() {
  didScroll = true;
});

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 250);

function hasScrolled() {
  var scrollTop = $(this).scrollTop();

  if (Math.abs(lastScrollTop - scrollTop) <= delta) { return; }

  if (scrollTop > lastScrollTop && scrollTop > navbarHeight) {
    $('.navbar').addClass('scrolling');
  } else {
    if (scrollTop + $(window).height() < $(document).height()) {
      $('.navbar').removeClass('scrolling');
    }
  }

  lastScrollTop = scrollTop;
}

To take it more easy, I post my code on http://jsfiddle.net/caio/7HrK7/. If you want to test in iOS, use http://fiddle.jshell.net/caio/7HrK7/show/light/ url.

VIDEO: http://hiperload.com/s/ua5k53n0x/d.mp4?inline

How as you can see, my code works on desktop and Android phones. But on iOS it need a touch event to respond while the scroll event still happens, otherwise it will only be executed at the end. I've tried to add touchmove event, but without success. Can you help me?

Upvotes: 1

Views: 196

Answers (1)

Marius Craciunoiu
Marius Craciunoiu

Reputation: 186

It looks like iOS pauses all timers while scrolling. Perhaps you'll have some luck trying the technique here:

iOS 6 js events function not called if has setTimeout in it

Alternatively, you can run hasScrolled() directly on touchmove. This seems to cause some flickering (at least on my iPad) so you might have to figure out a different way to animate the scrollbar:

$(window).on('touchmove', function() {
  hasScrolled();
});

See a fiddle here: http://jsfiddle.net/mariusc23/7HrK7/13/

Let me know if you find a solution so I can update the post. I'll spend some time on it as well. Thanks for reading. :)

Upvotes: 1

Related Questions