1

一旦用户滚动过页面中的特定元素然后如果他们向上滚动它会再次动画出来，我的 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 部分时，会有一个克隆的标题滑入视图，这就是我想要的想法，但它不会发生在我身上！

任何帮助将非常感激！谢谢！

4

2 回答 2

1

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

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

在这里试试。

于 2013-02-02T15:34:08.850 回答
1

是的，（未选择 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/

于 2013-02-02T15:55:24.790 回答