1

I'm working on a prototype that has a navigation bar that hides when a user scrolls down on the page and shows when the user scrolls up. I would like to take this a step further by setting an event that tracks when the user is no longer scrolling and animates the navigation panel back onto the page after a short timeframe (1.5 - 2 seconds).

I have read up on how I would go about doing this but I haven't been able to find anything that meets my needs completely.

Here is my prototype for reference: https://codepen.io/v_for_vinsanity/pen/2af1bfb20ae1578466943c7356de7348

Here is the jquery I'm using to show/hide the navigation bar:

var scrollSet = null;
var didScroll = false;
var windowTop = $(window).scrollTop();


function scrollUpdate () {
  didScroll = true;
  windowTop = $(window).scrollTop();
}

function scrollTicker () {

  if(didScroll) {

    if(windowTop > scrollSet) {
      $('body').addClass('hide-nav')
      scrollSet = windowTop;  
    }

    else if(scrollSet > windowTop){
      $('body').removeClass('hide-nav') 
      scrollSet = windowTop;
    }

    didScroll = false
  }

  requestAnimationFrame(scrollTicker);

}

$(window).scroll(scrollUpdate);
scrollTicker();
  • 2
    Possible duplicate of [Event when user stops scrolling](https://stackoverflow.com/questions/3701311/event-when-user-stops-scrolling) – Thomas Cohn May 17 '18 at 19:47

0 Answers0