Hide Menu After Scrolling and Appear on Scroll Up

Support
#1

Hi X Support,

I have read a few articles about hiding the header once the user scrolls down but bringing it back once they scroll back up, but I haven’t been able to get anything to work. I was wondering if you all could help me out. I have been taking my inspiration from www.alter.com.au

URL / www.qo17.com.au

I have also noticed due to my university putting restrictions on how they setup their own domains, that the JS section of the Pro builder is absent. I am hoping to get this alleviated soon, but would love to know for my other web developments.

Thanks,

Caleb

#2

Hey Caleb,

Thanks for writing in! The effect is using a custom JS and custom css.
1.) please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

(function($){
	var lastScrollTop = 0;
	$(window).scroll(function(event){
	   var st = $(this).scrollTop();
	   if (st > lastScrollTop){
	       $('.x-masthead').removeClass('nav-up').addClass('nav-down');
	   } else {
	      $('.x-masthead').removeClass('nav-down').addClass('nav-up');
	   }
	   lastScrollTop = st;
	});
})(jQuery);

2.) And then add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

.x-masthead {
    transition: opacity 1s ease;
}

.x-masthead.nav-up {
    opacity: 1;
}

.x-masthead.nav-down {
    opacity: 0;
}

We would loved to know if this has work for you. Thank you.

#3

RueNel,

So I tried this but it is quite glitchy, as in when returning to the top of the page the header doesn’t appear, and the header only appears once you stop scrolling up. The transition of the header’s appearance isn’t very smooth either. But I really do appreciate you helping me out.

I have been trying to fuse your code with this to get something smoother but it doesn’t work at all, any ideas?

http://jsfiddle.net/mariusc23/s6mLJ/31/

Thanks,

Caleb

#4

Hi there,

It’s because the script will only execute once the event is fired. Example, when you’re done clicking a button/link, it’s only when it triggers the linking or script. It will not run before clicking it, it always runs after clicking. The same goes when Scrolling, the scroll is a window’s event.

Maybe what you need is not scroll event by a realtime script that runs even without scrolling. Something like a script that is bound to javascript’s setInterval() function. Example,

(function($){
	var lastScrollTop = 0;

	setInterval( function(){
	   var st = $(this).scrollTop();

	   if (st > lastScrollTop){
	       $('.x-masthead').removeClass('nav-up').addClass('nav-down');
	   } else {
	      $('.x-masthead').removeClass('nav-down').addClass('nav-up');
	   }
	   lastScrollTop = st;
	}, 500 );

})(jQuery);

But that means the script is forever running, unless you remove it,

Thanks!

#5

Rad,

So I got the snippet of code I found on jsfiddle to work and looking around the internet, all their transitions are very smooth for the menu to reappear. It seems the menu appears smoothly one time but then can never repeat itself. Is it possible to have it slide in and out from the top smoothly?

Similar to www.alter.com.au

Thanks,

Caleb

#6

Hi there,

In that case, please change this CSS

.x-masthead {
    transition: opacity 1s ease;
}

to this

.x-masthead {
    transition: all 1s ease;
}

That means to apply smooth transition for all changes instead of just the opacity.

Thanks!

#7

Rad,

Again, thanks for your help, I figured out that when the header is over Revolution Slider or Essential Grid, the animation fails thats why I thought the transitions were jagged, so I am so sorry for not testing it properly, I just tested my homepage which uses a large Revolution Slider at the top. So with that being said, is there anything we can do about it, and instead of fading in can it slide from the top?

Thanks,

Caleb

#8

Hi Caleb,

With your current setup it is possible with more customization that is outside the scope of our support. There is difference in structure with what you have and the sample site. Since you are using Pro, please check the Shrink amount feature for sticky bar. It’s not exactly the same but the shrink feature slide up when shrink: