Transparent navigation bar after scrolling

[theleanbox]

Hi, I am looking to make the website navigation bar transparent when entering the website then after scrolling it becomes a solid color. Example: https://www.maf.nl/5
Thank you!

Every time I use the code I provided below it becomes transparent and after scrolling and changes to a color. This is what I want BUT I want if I go back to the top of the page it turns transparent again.

Code I’ve Tried:

jQuery(function($){

$(window).scroll(function(){

	if( $(this).scrollTop() == 0 ) {
		$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
	}

});

});

[jade]

Hi Dayana,

Please add the JS code you have posted in the Global JS then update this code:

.x-navbar {
    background-color: #606060;
    border: none;
    text-align: left;
}

to

.x-navbar {
    background-color: transparent;
    border: none;
    text-align: left;
    box-shadow: none;
}

Then add these codes as well:

.masthead {
    position: absolute;
    width: 100%;
}

.x-navbar-fixed-top {
    background-color: rgba(0,0,0,0.7);
}

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[theleanbox]

When I go back to the top of the page it still becomes a solid color. I want it to return to transparent after scrolling back to the top. But if I scroll down it turns solid.

[jade]

Hi there,

There is a missing line in the jQuery code you have added which is causing an issue.

Please use:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
		}

	});

});

Hope this helps.