当窗口滚动通过另一个元素时显示一个新的元素

Question

我似乎有一些问题，我的jQuery代码让我的克隆导航进入视图，一旦用户滚动浏览页面中的特定元素，然后如果他们向后滚动它再次生成动画。

我写jQuery代码是：

$(window).scroll(function() { 
var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight(); 
var scrollPosition = $(this).scrollTop(); 
if(homeHeight <= scrollPosition) { 
    $('#clonedHeader').animate({'top': '0'}, 300);  
} else { 
    $('#clonedHeader').animate({'top': '-100px'}, 300); 
} 

}）;

这里有一个小提琴：http://jsfiddle.net/ABdLh/

所以那里有一个克隆的头，当你滚过homeIntro一部分滑入视图，以及这就是我想要的想法，但它不会发生我！

任何帮助将不胜感激！谢谢！

Answer 1

我以前忽略了一些代码。通过简单地将.stop() - 方法，你可以得到它的工作：

if(homeHeight <= scrollPosition) { 
    $('#clonedHeader').stop().animate({'top': '0'}, 300);  
} else { 
    $('#clonedHeader').stop().animate({'top': '-100px'}, 300); 
} 

试试吧here。

Answer 2

是的（jQuery没有选择）是为什么它不工作的核心问题。但一些建议 -

像这样复制html标记是非常糟糕的。您应该使用jQuery/CSS来调整标题在各个滚动位置的样子。

此外，如果您在Chrome/Firefox中使用控制台，它可能会帮助您进行调试 - 它会在没有jQuery的情况下立即为您提供错误。如果你在这里打开我的小提琴，我留下console.log（）语句来显示基于滚动的函数被触发的位置。

动画像这样的标题会导致一堆问题。使用jQuery动画可能会导致构建问题，如果您真的很快上下滚动，这可能会导致同一页面上同一页眉。 注意 - 您提到的停止方法将对此有所帮助，但对于大多数动画问题（特别是悬停）而言，这样做还不够，您应该查看诸如“HoverIntent”之类的插件。

最后，它声明+计算尽可能多的变量的良好做法，因为您可以在不断更新的函数之外进行计算 - 您无需连续重新计算您正在比较的头的高度，将是一个固定的数字。

// this height will be the same, you dont need to constantly calculate it on scroll 
var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight(), 
    scrollPosition; 

$(window).on('scroll', function() { 
    scrollPosition = $(this).scrollTop(); 
    animateHeight(scrollPosition); 
}); 

function animateHeight(scrollPosition) { 
    if (scrollPosition >= homeHeight) { 
     console.log('yes'); 
     $('#clonedHeader').animate({ 
      'top': '0' 
     }, 300); 
    } else { 
     console.log('no'); 
     $('#clonedHeader').animate({ 
      'top': '-100px' 
     }, 300); 
    } 
} 

http://jsfiddle.net/ndreckshage/ecUAc/