Question

我正在尝试在用户滚动时向我的导航中添加一个类，该类将根据.scrollTop()值添加到元素中。我有这个工作正常但发生的事情是，每次用户滚动时，addClass一直在触发，因为我在添加的类上有CSS3动画，它创建了一个非常明显的人工制品。

See my rough implementation here

我确实意识到有像'scrollspy'和'waypoints'这样的选项，但是我很想找到一种方法来实现它而不用它们（我没有测试过这些库是否会发生这种情况）

反正有没有阻止这种情况发生？感谢。

编辑：根据请求附加代码。

$(window).scroll(function(){
    var scrollPos = $(window).scrollTop();
    if(scrollPos <= 100){
        $(".nav-home").addClass("selected");    
    }
    if(scrollPos > 100 && scrollPos <= 500){
        $(".nav-showcase").addClass("selected");
    }
});

Answer 1

您可以检查该类是否已添加，如果是，则不再添加。

if(!$(".nav-home").hasClass("selected")){
$(".nav-home").addClass("selected")
}

希望这会有所帮助

Answer 2

您需要像故事一样阅读您的代码：

if(scrollPos < 100){
  $(".nav-home").addClass("selected");  
}
if(scrollPos > 100 && scrollPos < 500){
 $(".nav-showcase").addClass("selected");
}

如果我的滚动小于100，请添加.nav-home上选择的班级如果我的卷轴介于100＆amp;＆amp; 500添加在.nav-showcase

上选择的班级

我希望你已经明白为什么这么多次开枪了？

如果不是：有一个介于100 - 500（400像素）之间的滚动，可能是很多滚动，所以如果你在这两个值之间，它会一直开始。

作为解决方案，我想说，请选择MRIDA的解决方案：

if(scrollPos < 100){
  if(!$(".nav-home").hasClass("selected")){
    $(".nav-home").addClass("selected");
  }
}
if(scrollPos > 100 && scrollPos < 500){
  if(!$(".nav-showcase").hasClass("selected")){
    $(".nav-showcase").addClass("selected");
  }
}

Answer 3

如前所述@Mark，“你需要像故事一样阅读你的代码”;我只是没有足够深度地阅读我的故事。我在错误的位置删除了我的班级，从而导致我遇到的问题。如果有人有兴趣，我已经更正了我在上面发布的jsbin中的片段。

感谢所有回复。

停止多次触发addClass

3 个答案: