How to hide menu on scroll down and show on scroll up

Support
#1

Hi

I would like to hide my quick links menu on desktop (very top menu) when scrolling down and show it again when scrolling up. What I mean is not just turning opacity to 0 (as in other threads), but genuinely hiding it.

I would also like to hide my mobile quick links (bottom header bar that shows on mobile) on scroll down and show it again on scroll up (like the above behaviour).

This is similar to how safari behaves on iOS.

How do I achieve this?

I will put my credentials in secure note.

#2

Hi There,

Please take a look at these articles:

Let us know how it goes!

#3

I have followed the instructions on the medium article, but for some reason, it doesn’t seem to do anything.

please could check to see if I have made a silly mistake? I have applied on my mobile nav only (Primary Mobile nav)

#4

Hey @darrenkeoughball,

Sorry for the confusion. Regretfully, this is not a feature offered in Pro. There is no class activated when scrolling up. Also, the position of the fixed bar is dynamically added so you need to override this also.

I’ll give you some guidance but fixing issues arising from the use of the guide and further enhancement would be outside the scope of our support. Based on your current setup, please add this code to your Header JS.

(function($) {
	var iScrollPos = 0;

	$(window).scroll(function () {
	    var iCurScrollPos = $(this).scrollTop();
	    if (iCurScrollPos > iScrollPos) {
	        $('.e356-1.x-bar').css({"position": "static", "width": "100%"});
	    } else {
	        $('.e356-1.x-bar').css({"position": "fixed", "width": "100%"});
	       	$('.e356-5.x-bar').css("top","32px");
	    }
	    iScrollPos = iCurScrollPos;
	});
})(jQuery);

Please see this screencast to see the effect.

Hope that helps and thank you for understanding.

#5

Hey Christian!
The screenshare is exactly what I am going for! I pasted into my Header JS but regretfully nothing happens. :confused:

#6

This works perfect on my mobile quick links bar at the bottom.

#7

Hi There,

You can add the following code to have this effect on the navbar :

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;
	}
});

Hope it helps

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.