Hide nav bar on scroll down and show it on scroll up

Question

I'm using this wordpress theme http://newnotio.fuelthemes.net/space/ and I'd like the nav bar to be hidden on scroll down and to be visible on scroll up (instead of always visible).

Can you help me to achieve this?

Edit 15/07 : I've managed to add a class to the header php script of the theme. I've called it nav-down as I'm trying to replicate this: http://jsfiddle.net/mariusc23/s6mLJ/31/

I've also copy/pasted the JS code but I'm getting an error message that "$ is not a function". Any idea what the issue is? Thanks

 .header { display: flex; align-items: center; height: 50px; position: fixed; top: 0; left: 0; background: red; width: 100%; z-index: 101; padding: 0 15px; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }.nav-up { top: -50px; }

 <header class="header style2 **nav-down**"> <nav id="full-menu" role="navigation"> </nav> </header>

Answer 1

You can achieve this without adding a class to your header, using plain javascript. Here is an example:

 window.onscroll = function(e) { var scrollY = window.pageYOffset || document.documentElement.scrollTop; var header = document.querySelector('header'); scrollY <= this.lastScroll ? header.style.visibility = 'visible' : header.style.visibility = 'hidden'; this.lastScroll = scrollY ; }

 body { height: 2000px; } header { position: fixed; top: 0; }

 <header> Sample Header (scroll up/down to show/hide) </header>

Edit: here is an updated snippet that should work for the website in question.

 window.onscroll = function(e) { var scrollY = window.pageYOffset || document.documentElement.scrollTop; var header = document.querySelector('header'); var height = -header.clientHeight; header.style.transition = 'transform 0.1s'; (scrollY <= Math.max(this.lastScroll, 50) || window.innerWidth <= 1200 || this.loaded === undefined) ? header.style.transform = 'translateY(0px)' : header.style.transform = 'translateY(' + height + 'px)' this.lastScroll = scrollY; this.loaded = true; }

 body { height: 2000px; } header { position: fixed; top: 0; }

 <header> Sample Header (scroll up/down to show/hide) </header>

Answer 2

First install plugin to add custom JS and CSS (although CSS can be added without this plugin), you can use "Simple Custom CSS and JS" plugin.

Then, let's say your navbar ID is "#site-header" and is 80px high. Here you have the full code:

CSS

#site-header { 
    position:fixed !important; 
    top:0;
    left:0;
    width:100%;
    transition:0.5s ease-in-out;
    height:100px;
    z-index:100;
} 

.nav-show{
transform:translatey(-100px);
left:0;
}

and JS (jQuery)

jQuery(document).ready(function( $ ){
  var previousScroll = 0;
  $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
    
       if (currentScroll > previousScroll){
           $('#site-header').addClass('nav-show');
       } else {
           $('#site-header').removeClass('nav-show');
       }
       previousScroll = currentScroll;
    });
  
});

Answer 3

With JS without jQuery

 let navBar = document.querySelector('nav') let prevScrollPos = window.pageYOffset window.addEventListener('scroll', () => { let currentScrollPos = window.pageYOffset prevScrollPos > currentScrollPos? navBar.style.top = '0': navBar.style.top = '-40px' prevScrollPos = currentScrollPos })

 body { height: 7000px; background-color: black; margin:0; padding:0 } nav{ width: 100%; background-color: gold; color: black; text-align: center; padding: .5rem; font: bold 2rem monospace; position: fixed; top: 0; transition: .3s; z-index: 999; }

 <nav>Nav</nav>