Header Bar Visible On Scroll Up

[mcblake]

Hi,

We would like our header to be visible when page is first loaded, then disappear when scrolling down, and only reappear when scrolling up.

Please advise.

Thanks, MB

MB Guiding • Vancouver Island Hiking Guide

[nabeel]

Hi there,

Thanks for writing around! Try this, first add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {
	// Hide Header on on scroll down
	var didScroll;
	var lastScrollTop = 0;
	var delta         = 5;
	var header        = $(".hm1.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;
	}	
});

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

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

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[nabeel]

Hi again,

As you see this requires custom development and the code I’ve provided serves as a guide, this is only to get you started. You probably need to consult a developer to assist you with this if you’re not comfortable making changes on your own.

Thanks for understanding. Take care!

[mcblake]

This is very close to working on global headers now. Only issue is header on global header assigned pages is covering top of page and breadcrumbs.

[Joao]

Hi There,

Please add the following CSS to Theme Options CSS

.x-main.full {

    margin-top: 35px;
}

Hope it helps

[mcblake]

Javascript and CSS you originally sent works perfectly on the home page but not on any other pages.

[nabeel]

Hi again,

You may try adding the following code in your Customizer:

.x-masthead {
    min-height: 80px !important;
}

Since this is a custom solution and it may have some glitches, we won’t be able to support the issues caused by the above script or CSS provided. If you need in depth changes you can consult a developer to assist you with this.

Thank you for understanding. Take Care!

[mcblake]

Thanks! Added padding-top: 80px; to the breadcrumbs container and seems to be working.

[nabeel]

Glad you’ve sorted it out.

Cheers!