Changing nav-bar color after scrolling?

Question

How can I set the navbar with no background color?

When scrolling down after a div the nav-bar gets a new background-color (the nav-bar should be fixed at top, I use navbar-fixed-top in Bootstrap)

I've tried some tutorials but I didn't succeed.

This is the website : http://attafothman.olympe.in/
I'm talking about that black nav-bar on top.

Answer 1

Here is simplest way how to change navbar color after window scroll:

Add follow JS to head:

$(function () {   $(document).scroll(function () {     var $nav = $(".navbar-fixed-top");     $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());   }); }); 

and this CSS code

.navbar-fixed-top.scrolled {   background-color: #fff !important;   transition: background-color 200ms linear; } 

Background color of fixed navbar will be change to white when scroll exceeds height of navbar.

See follow JsFiddle