3

I would like to toggle menu at the bottom during scroll event. So I've created a fixed menu which show/hides based on its position from the top. The event currently only fires during touch. Is there any way to get event triggered when the web page is scrolling after finger is lifted off from the device? Scroll event works well on android device.

function toggleMenu() {
            if ($('.menu').offset().top < $('.fixed-menu').offset().top + 32) {
                $('.fixed-menu').css('visibility', 'hidden');
            } else {
                $('.fixed-menu').css('visibility', 'visible');
            }
        }

 $(window).on("load resize scroll touchstart touchmove touchend", function (e) {
      toggleMenu();
});


html, body {
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}
Rahul
  • 31
  • 1
  • 3

1 Answers1

-1

As you're listening for touchstart, touchmove and touchend it of course will trigger on touch as well. I would probably try to only make it trigger on scroll, and add some timeOut to see if the scrolling has stopped or not.

$(document).on("scroll", function() {
    var position = $(document).scrollTop();
    hideMenu();
    setTimeout(function() {
        if (position == $(document).scrollTop())
            // We have stopped scrolling
            showMenu();
    }, 100); 
});
pingul
  • 3,351
  • 3
  • 25
  • 43
  • 1
    Thanks, the condition now started working after scrolling stops. However, during motion it still doesn't trigger in Safari iOS. – Rahul Jul 30 '15 at 11:36
  • @Rahul I have no device to test on, but it seems that for iOS you have to add `.on("scroll touchmove")` as you had in your original post. (See http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad) – pingul Jul 30 '15 at 11:56
  • As stated in reference link that you have mentioned above it seems this event is only fired when the user is actively scrolling, it is not fired during the deceleration phase of momentum scrolling. – Rahul Jul 30 '15 at 12:14
  • @Rahul I interpret it so that `touchmove` triggers on touch scroll, and `scroll` triggers on the deceleration phase, no? – pingul Jul 30 '15 at 12:16
  • 1
    You have rightly interpreted, scroll event does work well with other devices as intended during deceleration phase but doesn't works specifically on ios devices. – Rahul Jul 30 '15 at 12:30