如何在滚动浏览锚点时让navbar更改CSS类？ [英] How do I make my navbar change CSS class upon scrolling past an anchor point?

问题描述

我使用Bootstrap 3，并且想要在用户滚动浏览我的网页上的大标题图片时实现此效果。我需要导航条的背景从透明到白色。我查看他们的代码，我知道它是用javascript完成，甚至看到 WHERE 发生的事情我想（寻找ID'＃main-header'在那个JS）...

不知道高级Javascript除了，我正在寻找一种方法来应用到我的导航栏，当滚动过某一点。我的代码的类称为'navbar'，我想它变成白色，当它通过#main。

解决方案

如果您使用Twitter，请告诉我们您是否需要更多信息Bootstrap这可以通过'affix'插件来实现。 p>

这是很简单的设置，这里是文档

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!

解决方案

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

这篇关于如何在滚动浏览锚点时让navbar更改CSS类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！