0

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

在这里查看我的粗略实现

我确实意识到有像'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");
    }
});
4

3 回答 3

2

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

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

希望这可以帮助

于 2013-06-04T14:18:40.407 回答
1

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

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

如果我的滚动条小于 100，则添加选择的类.nav-home 如果我的滚动条介于 100 && 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");
  }
}
于 2013-06-04T14:50:18.577 回答
0

正如@Mark 前面提到的，“您需要像阅读故事一样阅读您的代码”；我只是没有足够深入地阅读我的故事。我在不正确的位置删除了我的课程，从而导致了我遇到的问题。如果有人感兴趣，我已经更正了我在上面发布的 jsbin 中的片段。

感谢所有的答复。

于 2013-06-07T14:37:19.720 回答