jQuery在两个类之间滚动切换

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

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

我想通过在两个类之间切换来实现这一点，例如

应该是默认类，如果用户向下滚动以添加

并且如果他滚动回到再次

。

这是我的尝试：

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

但这不起作用。 这是一个jsbin 。

任何想法如何让它工作？

Answer 1

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

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

Answer 2

请尝试以下代码：

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

这是jsbin中的示例

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()和.addClass() ： 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; } 

  
scroll me down and up please to see me changing colors... 

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