Hide sticly header on scroll down, show it on scroll up

[Misho]

Hi,

I believe this would be greatly welcome option in the Header builder:

an option to hide the sticky header while scrolling down, and show it on scrolling up, when the intention may be to reach it. This approach is fantastic for UX.

In the meanwhile, would there be a hacky way to achieve this?

Thanks!

[thai]

Hi @Misho,

We’ve added this as a feature request so it can be taken into consideration for future development.

To achieve that, you can take a look at this article:

Hide Header Navigation on Scroll down and Show on Scroll Up – CodeMyUI

Hope it helps

[Misho]

Thanks!

I am playing with the code but so far I was unable to make it working with Pro. (I gave a class to the bar, and tried to apply it to the header navbar = $('header');).

Maybe it is conflicting with Header settings. I’ll try more.

Thanks again!

$(document).ready(function () {
  
  'use strict';
  
   var c, currentScrollTop = 0,
       navbar = $('nav');

   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = navbar.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b + b) {
        navbar.addClass("scrollUp");
      } else if (c > currentScrollTop && !(a <= b)) {
        navbar.removeClass("scrollUp");
      }
      c = currentScrollTop;
  });
});

[rad]

Hi Misho,

Thanks for sharing, and yes, it could be a conflict since there are multiple scripts attached to scroll event. That script modify it but another one too. May work but still glitchy.

Thanks!