javascript - jQuery 在两个类之间滚动切换

Question

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

我想要做的是，当用户向下滚动超过 100px 将背景更改为蓝色，并且如果他返回到 0px 将背景更改为默认状态。

我想通过在两个类之间切换来做到这一点，例如 <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 .

有什么想法可以让它发挥作用吗？

Answer 1

尝试以下代码:

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

这是 jsbin 中的示例