jQuery在两个类之间滚动切换

jQuery on scroll toggle between two classes

本文关键字：之间 滚动 两个 jQuery      更新时间：2023-09-26

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

我想做的是，当用户向下滚动超过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。

有什么办法让它发挥作用吗？

尝试以下代码：

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

以下是jsbin

中的示例

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

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

您可以像这样使用.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>

希望它能有所帮助！

问题是每次用户滚动时都调用toggleClass。此代码将修复此问题：

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

jsbin

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

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

这是jsbin

相关文章：