滚动时，导航栏活动选项卡会更改颜色

我希望我的活动标签在用户滚动传递1000px时改变颜色，当它<1000px时返回原始颜色。

我已经尝试了下面的CSS工作，并永久地更改活动选项卡上的背景。

.navbar-default .navbar-nav > .active{ background: #111; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: #111; } 

还尝试结合上面的CSS和滚动function，但我不认为我正在瞄准活动div正确… 如何在滚动function中最好地定位这个活动的tab类？ 或者有更好的替代方法吗？

JsFiddle： https ：//jsfiddle.net/Lczsjz3y/7/

任何帮助，将不胜感激 ：）

Answer 1

从你的小提琴开始，看起来你只需要为scroll事件添加一个监听器，因为你现在拥有它，它只是在加载时拉出scrollTop()值。 所以，类似的东西：

 $(window).on('scroll', function() { var scroll = $(window).scrollTop(); if (scroll > 1000) { // change class $(this).find("navbar .active").css({ "backgroundColor":"#000" }); } else { // change it back $(this).find("navbar.active").css({ "backgroundColor":"gray" }); } }); 

希望这可以帮助。

Answer 2

这将有效：

 $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 1000) { $(".navbar").css({"background-Color": "black"}); } else { $(".navbar").css({"background-Color": "yellow"}); } }); 

小提琴： https ： //jsfiddle.net/Lczsjz3y/21/

Answer 3

它不是完美的，也不是最好的解决方案，但我已经尝试过我所知道的并且设法得到我想要的东西。 https://jsfiddle.net/y791ur1x/3/

 $(document).scroll(function () { var y = $(this).scrollTop(); if (y >= 1100) { $('.navbar').removeClass("navbar-inverse").addClass("navbar-default"); $(".navbar-custom").css({ "backgroundColor":"#000000" }); } else { $('.navbar').removeClass("navbar-default").addClass("navbar-inverse"); $(".navbar-custom").css({ "backgroundColor":"#222222" }); } }); 

仍然期待一个适当的清洁解决方案!! ^^