Hi! I have a Navbar that is fixed to top and the background is transparent. I just want to have a dark transparent background when the page is scrolled down. Please I need help to make it work. Thanks.
Create a .js file in the 'Design' window and edit it with this code :-
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
})
100 is 100px down from when you start scrolling. You can change this to whatever suits your Navbar height
Create a .css file in the 'Design' window and edit it with this code :-
.bg-primary.scrolled {
background: yellow !important;
}
.bg-primary is the Navbar Background class. You can use whatever class you are using. Make sure there is no space between '.bg-primary' and '.scrolled'
Change the 'background' to whatever you want. Don't forget the '!important'
Like this?
http://tmapa.com/
Use javascript to add/remove a class to the navbar.
1) Right click on the JavaScript heading in the Design panel (lower right) and choose create Create JS. You can name it anything you want. Then double click it to open it in the editor and type in the following code, and click Apply.
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('myClass');
} else {
$('nav').removeClass('myClass');
}
});
(myClass can be named whatever you want but it must be the same in the JS file and the CSS. You can change the number 50 to whatever distance you want the person to scroll before the navbar changes from transparent to solid.)
2) Add the following to your custom CSS file
nav {
transition: all .4s ease-in-out;
}
.myClass {
background-color: red;
transition: all .4s ease-in-out;
}
The CSS transition rule will give it a nice fade in-out effect. The background-color can be whatever you want.
To Windy & Printninja, thank you so much again for this. I'll try them all out.