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 回答