Christian Christian - 1 year ago 119
CSS Question

Hide header when scroll down and show when down

I have a 1 page website with fixed header and fixed banner. My header only shows when I scroll up at the about page but when im further down the about page the header wont show up anymore.
please take a look at my website

Answer Source

Well if I understood your question then it is because you are adding .nav-up class when you scroll down and removing the .nav-down class from the header. And your .nav-up has top:-125px property. This is what is causing your header to be "hidden".


// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var navbarHeight = $('header').outerHeight();

    didScroll = true;

setInterval(function() {
    if (didScroll) {
        didScroll = false;
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop){
    } else {
    lastScrollTop = st;

So, I stripped out the delta and made the hasScrolled function simpler by just checking if user is scrolling up or down and on basis of that, it will add either .nav-up or .nav-down.

Hope it helps! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download