jQuery在滚动时切换两个类之间的方法

Question

默认情况下，我有一个导航栏，其背景颜色为红色。

我想要的是，当用户向下滚动超过100个像素时，将背景更改为蓝色；如果回到0个像素，则将背景更改为其默认状态。

我希望通过两个类之间的切换来实现这一点，例如 <div class="navigation red"> 应该是默认类，如果用户向下滚动，则添加 <div class="navigation blue"> ，如果他向上滚动，则再次拥有 <div class="navigation red"> 。

以下是我的尝试:

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(window).scrollTop() > 100){
        $('.navigation').toggleClass( "blue");
    }
 });
});

但是这并没有起作用。这里有一个jsbin。

有什么想法让它工作吗？

- agis

Answer 1

请尝试以下代码：

$(document).ready(function () {
    $(window).scroll(function () {
        $('.navigation').toggleClass("blue", ($(window).scrollTop() > 100));
     });
});

这是一个在 jsbin 上的示例。

- NeoMan

---

这个应该被投票为正确答案。但是我想在这里给一个提示，使用这个解决方案，html 应该添加一个默认类，然后备选类将会切换。 - nourhomsi

Answer 2

在这种情况下，使用toggleClass()可能不是正确的解决方案。应该使用addClass/removeClass代替：

if ($(window).scrollTop() > 100){
    $('.navigation').addClass( "blue");
}
else {
    $('.navigation').removeClass("blue");
}

- Control Freak

---

当然，这是有效的，因为.blue在css中声明较晚，但是如果反过来，它就不会起作用。我建议明确地删除您不想要的类，并添加您需要的类，以防止出现这种问题。 - Lbatson

应该足以推断出来。 - Control Freak

Answer 3

您可以像这样使用.addClass()和removeClass()：http://jsfiddle.net/csdtesting/qhfmw8hx/

$(window).scroll(function() {
  var windowYmax = 100;
  var scrolledY = $(window).scrollTop();

  if (scrolledY > windowYmax) {

    $('.navigation').addClass("blue");
  } else {
    $('.navigation').removeClass("blue");
    $('.navigation').addClass("red");
  }
});

.navigation {
  height: 800px;
}
.navigation.red {
  background: red;
}
.navigation.blue {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation red">scroll me down and up please to see me changing colors...</div>

希望有所帮助！

- Giannis Grivas

Answer 4

问题在于每次用户滚动时都调用toggleClass。以下代码可以解决这个问题：

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 100 && !$( ".navigation" ).hasClass( "blue" ) || $(window).scrollTop() === 0 && $( ".navigation" ).hasClass( "blue" ){
            $('.navigation').toggleClass( "blue");
        }

    });
});

这个jsbin网站

- Martin

Answer 5

你正在添加一个类并删除另一个类，我建议在这种情况下只使用addClass和removeClass。此外，您可以链接这些方法。

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(window).scrollTop() > 100){
      $('.navigation').addClass('blue').removeClass('red');
    } else {
      $('.navigation').addClass('red').removeClass('blue');
    }
  });
});

这里是jsbin。

- Lbatson