Docs

[bambooinn]

hello,

I was wondering with the Integrity theme, whether a nav bar can be behave like this site:

http://www.communityfibre.bt.com/resources/

By scrolling down, the nav bar disappears with the top. By scrolling upwards it appears (regardless how far down you are on the page).

Thanks

[Thai]

Hi There,

To achieve that, please add the following Javascript under Customizer > Custom > Global Javascript:

jQuery( function($) {
	var didScroll;
	var lastScrollTop = 0;
	var delta = 5;
	var navbarHeight = $('.x-navbar').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
	        $('.x-navbar').removeClass('nav-down').addClass('nav-up');
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
	            $('.x-navbar').removeClass('nav-up').addClass('nav-down');
	        }
	    }

	    if (st == 0) {$('.x-navbar').removeClass('nav-down')};
	    
	    lastScrollTop = st;
	}
});

After that add the following CSS under Customizer > Custom > Global CSS:

.x-navbar {
    transition: all 0.5s ease;
}
.x-navbar.nav-up {
    margin-top: -51px;
}

Replace the 51px with your navbar height 🙂

Hope it helps 🙂

[bambooinn]

hahaha.. amazing. Thanks!

working.

[bambooinn]

Hey!

I have a rev slider above the masterhead.. it seems to be off now (the navbar is either too high or too low when opened).

Can you help?

http://dev.bamboo-inn.nl

[Paul R]

Hi,

Try to select full screen layout for your slider then add .masthead as offset.

See screenshot – http://screencast.com/t/UUujVjptygo

Hope that helps.

[bambooinn]

Hi Paul,

Good job! Thanks….worked!

[Joao]

Glad to hear it,

Joao

[Author]

Posts