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

中的示例

Answer 2

使用toggleClass()可能是错误的解决方案。请改用addClass / removeClass：

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

Answer 3

问题是每次用户滚动时都会调用toggleClass。此代码将解决此问题：

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

    });
});

jsbin

Answer 4

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

＆＃13;

$(window).scroll(function() {
  var windowYmax = 100;
  var scrolledY = $(window).scrollTop();

  if (scrolledY > windowYmax) {

    $('.navigation').addClass("blue");
  } else {
    $('.navigation').removeClass("blue");
    $('.navigation').addClass("red");
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望它有所帮助！

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

jQuery在两个类之间滚动切换

5 个答案: