title: How to detect when a user is no longer scrolling to initiate the addition/removal of a class
body: <p>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). </p>
  
  <p>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.</p>
  
  <p>Here is my prototype for reference: <a href="https://codepen.io/v_for_vinsanity/pen/2af1bfb20ae1578466943c7356de7348" rel="nofollow noreferrer">https://codepen.io/v_for_vinsanity/pen/2af1bfb20ae1578466943c7356de7348</a></p>
  
  <p>Here is the jquery I'm using to show/hide the navigation bar:</p>
  
  <pre><code>var scrollSet = null;
  var didScroll = false;
  var windowTop = $(window).scrollTop();
  
  
  function scrollUpdate () {
    didScroll = true;
    windowTop = $(window).scrollTop();
  }
  
  function scrollTicker () {
  
    if(didScroll) {
  
      if(windowTop &gt; scrollSet) {
        $('body').addClass('hide-nav')
        scrollSet = windowTop;  
      }
  
      else if(scrollSet &gt; windowTop){
        $('body').removeClass('hide-nav') 
        scrollSet = windowTop;
      }
  
      didScroll = false
    }
  
    requestAnimationFrame(scrollTicker);
  
  }
  
  $(window).scroll(scrollUpdate);
  scrollTicker();
  </code></pre>