Help with top (menu/logo) header opacity on scrool

[rcbarros]

Hello Guys. Hope you’ all are doing well.

I was looking for in the Forum a way to set the top header menu transparent and on turn opacity on the scroll.

I was able to reproduce what I found in the forum, but I have a small discrepancy!

When the website load! The top header (logo and menu) would show opacity immediately, however, if I scroll the page a few inches up and down the top header show as supposed to!

webpage in question: https://www.kneadsmassage.com/

Best,

Robert B.

What I have:

CSS:
body header.masthead .x-navbar-wrap .x-navbar {
background: rgba(255,255,255,0) !important;
}
body header.masthead.x-scroll-effect .x-navbar-wrap .x-navbar {
background: rgba(255,255,255,0.4) !important;
}
body header.masthead.x-scroll-effect .x-brand img {
max-width: 60%;
}
body.x-navbar-fixed-top-active header.masthead.x-scroll-effect .x-navbar-wrap,
body.x-navbar-fixed-top-active header.masthead.x-scroll-effect .x-navbar-inner,
body.x-navbar-fixed-top-active header.masthead.x-scroll-effect .x-navbar .desktop .x-nav>li>a {
height: 60px;
min-height: 60px;
}

JS:
jQuery(document).ready(function($){
$(‘header.masthead’).addClass(“x-scroll-effect”);
$(window).scroll(function(){
if( $(this).scrollTop() == 0 ) {
$(‘header.masthead’).removeClass(“x-scroll-effect”);
}else{
$(‘header.masthead’).addClass(“x-scroll-effect”);
}
});
});

[ruenel]

Hello Robert,

Thank you for the very detailed post information.

To resolve your issue, please update your JS code and use this instead:

(function($){
	$(window).scroll(function(){
		if( $(this).scrollTop() == 0 ) {
			$('header.masthead').removeClass("x-scroll-effect");
		}else{
			$('header.masthead').addClass("x-scroll-effect");
		}
	});
})(jQuery);

Please let us know if this works out for you.

[rcbarros]

Great.
Works as supposed to.

Thanks.

[ruenel]

You’re welcome!
We’re glad we were able to help you out.