jquery - 当窗口滚动经过另一个元素时显示一个新元素

Question

我的 jquery 代码似乎在让我的克隆导航在用户滚动过页面中的特定元素后进入 View 时遇到一些问题，然后如果他们向上滚动，它会再次动画化。

我写的 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); 
}

});

这是一个 fiddle :http://jsfiddle.net/ABdLh/

所以当您滚动经过 homeIntro 部分时，有一个克隆的标题会滑入 View ，这就是我想要的想法，但它不会发生在我身上!

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

Answer 1

我之前忽略了一些代码。通过简单地添加 .stop() 方法，您可以让它工作:

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

试一试 here .