How to hide a header nav when scrolling, and show when scrolling has stopped

Question

I have a navigation header (normal HTML header tag). I want to fade it out when a user scrolls down, but show it when the user stops scrolling (after a 1 second delay).

How can I achieve this with using jQuery? This is what I have got so far:

 jQuery(function($){
    var lastScrollTop = 0, delta = 15;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");

   } else {
      // upscroll code
      $("header").css("top","32px");
   }
       lastScrollTop = st;
    });
});

Answer 1

This might help you, try to implement this example in your code: In this example, we are setting up the scroll event, so every time user perform the scroll operation following action is taken:

1. Fade out the header.
2. Clear the Time out, if it is set in the t var.
3. Set the timeout for 1 second, action taken after this timeout is to fade in the header again.

So, every time if one scroll point moved, event get called, header fade out and we setting a timout to display header after 1 second, but before that if another scroll point move, event again get called. and previous timer get cleared. This goes on n on until, user stop scrolling and then last time out function execute successfully and fade in the header again.

 $(function(){ var t; document.addEventListener('scroll',function(e){ $("#Header").fadeOut(500); clearTimeout(t); checkScroll(); }); function checkScroll(){ t = setTimeout(function(){ $("#Header").fadeIn(500); },1000); /* You can increase or reduse timer */ } });

 html, body { height: 1200px; margin: 0; padding: 0; width: 100%; } #Header { background: red; height: 100px; left: 0; position: fixed; top: 0; width: 100%; } #Header table { height: 100%; width: 100%; } #Body { background: grey; height: 200%; margin-top: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="Header"> <table> <tr> <th>HEADE R bar</th> </tr> </table> </div> <div id="Body"> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div>

In your code, rather than using fading effect, position of header is changed, so when the position of the header is change to hide it, set the timer to bring it back, in this way you show the header when scrolling stops.

$(function(){
    var lastScrollTop = 0, delta = 15;
    var t;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");
      clearTimeout(t);
      checkScroll();
   }
       lastScrollTop = st;
    });

  function checkScroll(){
          t = setTimeout(function(){
             $("header").css("top","0px");
          },1000); /* You can increase or reduse timer */
  }
});  

Answer 2

I ended up with the following code:

jQuery(function($){
    var lastScrollTop = 0, delta = 15;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");

   } else {
      // upscroll code
      $("header").css("top","32px");
   }
       lastScrollTop = st;
    });
});

Codepen: https://codepen.io/Canvasandcode/pen/bGGeWrj