两个类之间的滚动切换jQuery

默认情况下，我有一个导航栏，它有一个红色的背景颜色。两个类之间的滚动切换jQuery

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

任何想法如何让它的工作？

来源

2014-10-05 agis

使用toggleClass()可能是这个错误的解决方案。使用addClass/removeClass代替：

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

来源

2014-10-05 14:36:32

的例子当然，这工作，因为的.blue在CSS后宣布，但如果它被扭转，然后它不会。我会建议明确地删除你不想要的类，并添加你想要阻止的类型 – Lbatson 2014-10-05 14:45:35

它应该足以从中推断出来。 – 2014-10-05 14:57:40

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

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

    }); 
});

的jsbin

来源

2014-10-05 14:36:05 Martin

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

希望它能帮助！

来源

2014-10-05 14:39:07

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

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

这里的jsbin

来源

2014-10-05 14:40:36 Lbatson

试试下面的代码：

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

下面是jsbin

来源

2014-10-05 14:43:18 NeoMan

两个类之间的滚动切换jQuery

回答

相关问题