user3820292 user3820292 - 3 months ago 28
Javascript Question

Fading bootstrap navbar on scrolldown

I am practicing web design using this website as a guide http://www.montere.it/?lang=en.

So far I managed to position the logo and the navigation bar in the center and the logo is on top of the navigation bar but the problem is my navigation bar doesn't fade and display when I scroll down.

This is what I have tried. Please help.

Css

body {
height: 3000px;
background: red;
}

.navbar-fixed-top {
background-color: black;
transition: background-color 2s ease 0s;
}

.navbar-fixed-top.opaque {
background-color: rgba(255,255,255,0);
transition: background-color 2s ease 0s;
}

.navbar {
position: relative;
}
.navbar-brand {
position: absolute;
left: 50%;
margin-left: -50px;
display: block;
}

.navbar .navbar-nav {
display: inline-block;
float: none;
}

.navbar .navbar-collapse {
text-align: center;
padding-top: 40px;
}

.navbar-right {
position: relative;
bottom: 35px;
display: block;
}


Js

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('.navbar-fixed-top').addClass('opaque');
} else {
$('.navbar-fixed-top').removeClass('opaque');
}
});


https://jsfiddle.net/esranj00/

Answer

my navigation bar doesn't fade and display when I scroll down??? So you want it to be fixed and fade when the user scrolls right?

Just add position:fixed to .navbar-fixed-top.opaque and change the 0 on background color rgba(the 4th value) to a value between 0 and 1. I chose .5 for you

.navbar-fixed-top.opaque { 
 background-color: rgba(255,255,255,0.5);
 transition: background-color 2s ease 0s;
  position:fixed;
  }

if($(this).scrollTop() > 0) { 

also change this to 0 if you dont wanna wait