Scroll Activated Fixed Nav Bar - Scroll Down / Up to Hide / Show

So Webflow can do this natively, but one must set it on each page individually - it cannot be configured site wide. However, the piece of javascript below allows it to be configured site-wide very quickly.

Check out the jsfiddle of it in action - Scroll Up to show Nav Bar (Jquery) - JSFiddle - Code Playground

var position = $(window).scrollTop();

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > position) {
    $('.nav-bar').css('top', '-120px');
  } else {
    $('.nav-bar').css('top', '15px');
  }
  position = scroll;
});
1 Like