View navbar only when user scrolls up on iOS

Question

I’m using the technique of Marius Craciunoiu to display my entire navbar when the user scrolls the screen up.

So, here’s my code Javascript (using jQuery):

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;
}

For ease, I put my code on http://jsfiddle.net/caio/7HrK7/. If you want to test on iOS, you’ll need to sign in via another address http://fiddle.jshell.net/caio/7HrK7/show/light/.

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

As you can see, my code works on desktop and Android phones, but on iOS, you need to enter a touch event to respond while the scrolling event happens, or else the action will only be triggered at the end of the movement. I tried to add the event touchmove, but without success. You can help me?

Answer 1

Can’t do that on iOS. There’s an explanation here:

http://developer.apple.com/library/IOs/#Documentation/Appleapplications/Reference/Safariwebcontent/Handlingevents/Handlingevents.html

Basically, the wind only works when you start tapping the screen and when you stop tapping, when you move no event is held.

To verify, I made this code below in JavaScript to show the seconds while tapping the screen, and only works when it starts ringing and when it drops, if it is holding the screen and moving does not work:

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false )
    if (iOS){
    document.addEventListener('touchmove', function() {
        $('#emtemporeal').html((new Date()).getSeconds());
    }, false);
}

I had already gone through this once when customizing a navbar and ended up disabling it when accessing by iPad, but the main reason wasn’t even because of this detail, it was more because the fixed navbar occupies on iPad a considerable space, since the screen is small compared to a desktop.

Answer 2

My guess is that you should not use the event touchmove, since Safari will only execute the code "after" the last step of the viewport scroll.

In the video, it is quite evident that, so you can try to use the event touchend and touchcancel, as they will be executed right after the touch gesture.