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>

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? — CBroe, Jul 14 '18 at 15:41
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?) — Greg, Jul 14 '18 at 16:31
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. — CBroe, Jul 14 '18 at 17:56
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 — Greg, Jul 15 '18 at 16:01
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. — CBroe, Jul 15 '18 at 16:10

Brian · Accepted Answer · 2018-07-18T20:42:32.607

3

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>

edited Jul 18 '18 at 20:42

answered Jul 15 '18 at 20:50

Brian

1,860
1
9
14

Hello, sorry for the late response. I have updated my answer to include a solution that I have tested on your website. – Brian Jul 17 '18 at 01:21
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! – Greg Jul 17 '18 at 06:15
Hi Greg, thanks I didn't catch that. I have updated the second snippet to make sure the header displays properly. – Brian Jul 17 '18 at 14:03
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! – Greg Jul 17 '18 at 18:15
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. – Brian Jul 18 '18 at 00:34
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 – Greg Jul 18 '18 at 05:56
Alright, it's done. The change was to update `Math.max(this.lastScroll, 10)` to `Math.max(this.lastScroll, 50)`. – Brian Jul 18 '18 at 20:43

Pawel · Answer 2 · 2020-09-22T08:56:10.210

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

score 0 · Answer 3 · answered Oct 02 '21 at 14:20

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>

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

3 Answers3

Linked