Display navbar only when user scrolls up in iOS

Question

Display navbar only when user scrolls up in iOS

Navigation

#1 by (2 votes)
#2 by (0 votes)

5

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

So here's my JavaScript code (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;
}

To make it easier, I've put my code in the link . If you want to test on iOS, you'll need to sign in at another link address.

VIDEO: link

As you can see, my code works on desktop and Android phones, but on iOS, it is necessary to insert a touch event to respond while the scrolling event happens, or else the action will only be triggered at the end of the move. I tried to add the touchmove event, but to no avail. Can you help me?

javascript ios touch mobile-safari

asked by anonymous 04.05.2014 / 19:45

2 answers

Integration test connected to an FTP How to determine which HTML file should be displayed as input in Jersey?

score 2 · Answer 1

Can not do this on iOS. There is an explanation here:

link

Basically, the wind only works when you start tapping the screen and when it stops playing, when you move no event is performed.

To check, I made this code in JavaScript to show the seconds while playing the screen, and only works when the touch starts and when you release, if you hold 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 I ended up disabling it on access by the iPad, but the main reason was not because of this detail, it was more because the fixed navbar occupies considerable space on the iPad, since the screen is small compared to a desktop.

score 0 · Answer 2

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

In the video, this is very evident, so you can try to use the event touchend and touchcancel , because they will be executed soon after the touch gesture.