Transparent Fixed Navbar with opaque header on scroll

[sriggs9110]

Hello

I would like for my navbar to be transparent when fixed to the top, but upon scrolling become opaque. Please help.

A Marketing Agency Tailored To Your Business | Common People

[rad]

Hi there,

Thanks for writing in.

Please add this code to your global custom javascript.

jQuery ( function($) {

$(window).on('scroll', function() {

if ( $(this).scrollTop() > 0 ) {
$('.x-navbar').css('background', 'rgba(0, 0, 0, 0.9)');
} else {
$('.x-navbar').attr('style', '');
}

} );

} );

Cheers!

[sriggs9110]

@Rad

jQuery ( function($) {

$(window).on(‘scroll’, function() {

if ( $(this).scrollTop() > 0 ) {
$(’.x-navbar’).css(‘background’, ‘rgba(0, 0, 0, 0.9)’);
} else {
$(’.x-navbar’).attr(‘style’, ‘’);
}

} );

} );

Thanks this worked however I tried changing the color of the background and it broke the code.

Also how can we add a slight delay so it is more of a smooth transition?

[basanta]

Hi There,

If you will add the color in proper RGBA format it should work. Can you please send us the color code that you are adding and having the issue ?

For the smooth transition please add this below CSS to your theme option -> Global css and let us know how this goes.

.x-navbar {
-webkit-transition:  .5s; /* Safari */
    transition: .5s;
}

Hope this helps!

Thanks