停止多次触发addClass

我试图在用户滚动时向我的导航中添加一个类，该类将根据.scrollTop()的值添加到元素中。我有这个工作正常，但发生了什么事是每当用户滚动，addClass不断发射，因为我有CSS3动画的类添加它创建一个非常明显的人造物。停止多次触发addClass

See my rough implementation here

我也知道有像“scrollspy”和“航点”的选择，但我很想找到一种方法来实现这个没有他们（我没有测试，看看是否有发生那些图书馆）

有无论如何防止这种情况发生？谢谢。

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

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

来源

2013-06-04 ponens

请将相关的代码添加到问题 –

你是否只希望它在点击某个'.scrollTop（'）值时触发一次？ –

@AndrewWhitaker我没有发布它，在这里它再次http://jsbin.com/uyobic/1/ – ponens

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

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

希望这有助于

来源

2013-06-04 14:18:40 mrida

嗨，我确实尝试过，但没有奏效。我也读过一个stackoverflow问题，addClass已经检查一个类是否存在。 – ponens

您需要阅读你的代码就像一个故事：

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

如果我的滚动是100较小，加上.nav-home 选择的类别中，如果我的滚动是之间100 & & 500添加上选择的类.nav-showcase

I希望你已经明白为什么它会发射这么多次？

如果不是：在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-04 14:50:18 Mark

谢谢你的回复，我绝对明白发生了什么，为什么它会多次发射，我想我只需要知道如何防止它多次发射。我尝试的第一件事是'hasClass'，它不起作用。我读过另一个stackoverflow帖子，addClass检查类是否存在。 – ponens

正如@马克前面所提到的，“你需要阅读你的代码就像一个故事”;我只是没有看到我的故事足够的深度。我在不正确的位置将我的班级移走，从而导致我遇到的问题。如果有人感兴趣，我已经更正了上面张贴的jsbin中的代码片段。

感谢所有的答复。

来源

2013-06-07 14:37:19 ponens

停止多次触发addClass

回答

相关问题