Good afternoon,
I have a Navbar that starts transparent I hedge this via query:
$( "nav" ).css('border', 'none', 'important');
$("#hamburguer").css('background-color', 'transparent', 'important');
So far beauty, but when I go down I want it to return the normal properties of the bootstrap, and when I give the scroll up it would be transparent again. Any suggestion? Thankful.
You can set style by scrolling up.
When scrolling down, remove the style thus leaving the nav tag with what was defined in the style sheet.
I used style = border: 1px solid just to make it easier to see in the example.
$(document).ready(function() {$('nav').attr('style', 'border: 1px solid');});
var st = 0;
$(document).on('scroll', function(event){
var st2 = $(this).scrollTop();
if (st2 > st){
if ($('nav').attr('style') !== undefined) {
$('nav').removeAttr('style');
}
} else {
if ($('nav').attr('style') === undefined) {
$('nav').attr('style', 'border: 1px solid');
}
}
st = st2;
});html, body {height: 400px; background-color: #e5e5e5}
nav {position: fixed}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><body>
<nav>nav</nav>
</body></html>