Change of navigation menu background color on scroll in WordPress

Question

How can I set the navbar with no background color by default and to get the background color on scroll?

When scrolling down a div with a class full-width-menu should get a new bg color.

For a fixed location on top I use navbar-fixed-top from Bootstrap3.

I've tried almost every some tutorials that I came across but I didn't succeed.

I even tried with affix plugin from WordPress but no luck.

Here is my code

To over-write a ! important you need another ! important #f8f8f8 ! important; out ways a follow up of Transparent unless you have Transparent ! important. — Carol McKay
@jakob here is the jsfiddle with a generated html jsfiddle.net/pevoje/vtsmtatj — Damir

jakob jakob · Accepted Answer · 2016-07-12T12:16:57

You can set this css for transparent as default:

.navbar-inverse{
  background-color:transparent;
  border-color:transparent;
}

And in jQuery just target that class .navbar-inverse