Question

我在链接中添加了一些类，当它的目标在窗口中可见时。但是当我点击该链接时，该类被添加，然后被删除，然后再次添加，这会产生不希望的“闪烁”效果。这个小提琴http://jsfiddle.net/inliner/gx7ocfhr/6/更好地解释了这一点。滚动一点，然后单击标题中的三个项目之一。我在这做错了什么？如何防止这种眨眼？

function isScrolledIntoView(elem)
{
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();
  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  return ((elemTop - docViewTop)<= 240) && ((elemBottom - 70) >= docViewTop);
}    
$(window).scroll(function(){
  isScrolledIntoView("#advertizers") ? $(".s1").addClass("active") : $(".s1").removeClass("active");
  isScrolledIntoView("#traders") ? $(".s2").addClass("active") : $(".s2").removeClass("active");
  isScrolledIntoView("#agencies") ? $(".s3").addClass("active") : $(".s3").removeClass("active");
});

Answer 1

我认为这是由于在锚定点击时触发滚动事件，可能的解决方案是添加一个标志，如isAnchorScroll，在$（document）.ready（function（）{中定义并设置为false。在$（window）.scroll事件中检查你的标志，如果在更改类之前返回true，则在anchorScroll函数中将标志设置为true，然后在动画回调中设置为false。您还需要在动画回调中调用$（window）.trigger（＆＃39; scroll＆＃39;）。希望这有帮助

Answer 2

问题是在$(window).scroll函数期间触发了animate()处理程序。尝试在animate()回调中重新绑定它。检查一下

http://jsfiddle.net/f8jjcspt/1/

编辑：LukeThompson建议也更有效率

addClass在窗口滚动上闪烁

2 个答案: