How do I make my navbar change CSS class upon scrolling past an anchor point?

css, javascript, navigation, twitter-bootstrap, twitter-bootstrap-3

Solution

If you're using Twitter Bootstrap this can be achieved with the 'Affix' plugin

It's pretty straight forward to set up, here is the documentation

Problem

I'm using Bootstrap 3 and want to achieve this effect when the user scrolls past the large header image on my page. I need the background of the navbar to go from transparent to white. I looked in their code and I KNOW it is done with javascript, and even saw WHERE it was happening I think (look for the ID '#main-header' in that JS)... Not knowing advanced Javascript aside, I'm looking for a way to apply this to my navigation bar when scrolling past a certain point. The class for my code is called 'navbar' and I would like it to turn white when it passes "#main". Let me know if you need more information, and thanks in advance if anyone wants to help!

Original source

Related problems