Question

当用户滚动传递1000px并且将返回时，我希望我的活动标签更改颜色，当它是＆lt; 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和滚动功能，但我不认为我正在将活动div作为目标... 如何在滚动功能中最好地定位此活动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"
  });
 }
});

尽管如此，仍然期待一个适当的清洁解决方案！ ^^

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

3 个答案: