Header Hide on Scroll broken since last update

[mcblake]

Hi,

The JS from this post

Header Bar Visible On Scroll Up

… is no longer working since the last update. All caches have been cleared.

Please advise.

Thanks, MB

MB Guiding • Vancouver Island Hiking Guide

[thai]

Hi There,

Please add the hide-scroll-bar CSS class to your bar.

After that change the custom JS and CSS to this:

.nav-up {
    top: -80px !important;
    transition: all ease 0.5s;
}
.hide-scroll-bar.x-bar {
    position: fixed;
}
.nav-down {
    transition: all ease 0.5s;
    top: 0;
}

jQuery( function($) {
	// Hide header on scroll down
	var didScroll;
	var lastScrollTop = 0;
	var delta         = 5;
	var header        = $(".hide-scroll-bar.x-bar");
	var navbarHeight  = header.outerHeight();

	$(window).scroll(function(event){
	    didScroll = true;
	});

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

	function hasScrolled() {
	    var st = $(this).scrollTop();
	    
	    // Make sure they scroll more than delta
	    if(Math.abs(lastScrollTop - st) <= delta)
	        return;
	    
	    // 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 && st > navbarHeight){
	        // Scroll Down
	        header.removeClass('nav-down').addClass('nav-up');
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
	            header.removeClass('nav-up').addClass('nav-down');
	        }
	    }
	    
	    lastScrollTop = st;
	}	
});

Hope it helps

[mcblake]

Great thanks!

[nabeel]

You’re most welcome!