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>

Parimutuel

In which place would you need an additional wrapper for what exactly? // You should probably not switch between fixed and absolute to begin with, that's likely gonna be a bit "yanky" in any case. I would leave it at fixed, and make it "slide up" via translateY. Make that happen via an additional class (menu-hidden or sth. like that), that you can add/remove as needed, and throw in a transition for the transform property ... good as done, no? – Nullify

Thanks but is there a way to achieve this without having to add a class to the header (I have no idea how to add a class to the header, probably require updates to the scripts of the wordpress theme, but no idea which one?) – Parimutuel

You are going to need some custom JavaScript that react to the user scrolling the page in the first place ... So go investigate whether the theme already has any options to somehow embed such a thing, go find a plugin that makes it possible, or look into how to modify this yourself in the appropriate way. – Nullify

Thanks. I've managed to add a custom class to the header which should allow me to replicate the solution found on a JSFiddle, but now getting an other problem ('header undefined'). I have updated my question accordingly – Parimutuel

It says that $ is undefined, nothing to do with the header element you are trying to select there. So either jQuery is not embedded at all (perhaps unlikely in such a WP setting), or you tried to embed this code before jQuery was embedded, or last and maybe a little less likely, jQuery was embedded in noConflict mode. – Nullify

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>

Katzman

Hello, sorry for the late response. I have updated my answer to include a solution that I have tested on your website. – Katzman

Thanks a lot! I've added your code to the live website but still rendering a bit odd - can you please take a look when you get a chance? Many thanks! – Parimutuel

Hi Greg, thanks I didn't catch that. I have updated the second snippet to make sure the header displays properly. – Katzman

Thanks Brian. We're almost there :) The only remaining issue is with the initial state once the page has loaded. For some reason the header is not visible on page load. Once you start scrolling down and up everything works fine. Also, if I can abuse of your time and knowledges, is there a way to make the show/hide effect smoother ? Thanks again for all your help! – Parimutuel

Any time. I've updated the second snippet to make the animation smoother, and to check for page load. You just need to add the transition css property for smooth transitions. – Katzman

Many thanks - that works like a charm now! :-) Maybe one last point if I may. Is it possible to hide the header after a scroll down of 50px (=the height of the header) and not immediately after a 1px scroll? Tks – Parimutuel

Alright, it's done. The change was to update Math.max(this.lastScroll, 10) to Math.max(this.lastScroll, 50). – Katzman

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;
    });
  
});

Mycenaean

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>

Handling