[BaroninnParticipant]

Hi

Is it possible to show the menu when scrolling up ?
And hide it when scrolling down..

Best Regards
Baroninn

[ChristianModerator]

Hey Baroninn,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. Thanks for understanding. Take care!

[BaroninnParticipant]

Hi

I found this great solution to hide menu on scroll down and reveal it on scroll up

But after days of trying to implement it with X theme , it just doesnt work.
Something within X-navbar is forcing the menu. And I beleave its somekind of javascript or I dont know.
I know this is beyond your scope of support , and I understand if you dont want to take valuable time in debugging something out of your scope.

But Im just gonna paste the code here for you to take a look , maybe you can see something that will make this work, maybe not .. And maybe Themeco will include this free code in x theme for everyone…

Either way , I always love your support.
Here is the Jsfiddle code :
https://jsfiddle.net/mariusc23/s6mLJ/31/

[ThaiModerator]

Hi @baroninn,

Please try with this CSS:

.nav-up {
    top: -50px !important;
    transition: all ease 0.5s;
}

And the Javascript:

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

You can replace the 50px with your navbar’s height.

Let us know how it goes!

[BaroninnParticipant]

This reply has been marked as private.

[JadeModerator]

You’re welcome. Glad to hear it’s now sorted. 🙂

[Author]

Posts