jquery - jQuery 中的动画粘性导航问题

Question

我正在尝试创建一个动画粘性导航，当用户滚动超过某个点时，该导航会移动到文档的顶部。它几乎可以工作(并且在第一页加载时表现得很好)，但是当用户滚动到顶部然后第二次向下滚动时，导航会跳转而没有动画。谁能看到我做错了什么吗？

这是我到目前为止的 jQuery:

var x = true;
$(window).scroll(function(){
    if( $(document).scrollTop() > 150 ){
        x = false;
        $(".header").addClass("pinned");
    }else if( $(document).scrollTop() === 0 ){
        $(".header").removeClass("pinned");
        x = true;
    }
    if(x === false){
        $(".pinned").animate({marginTop:"0px"}, 200);
    }
});

这是一个 jsfiddle 来演示我的问题以及我想要实现的目标: http://jsfiddle.net/DzTRb/4/

Answer 1

当jquery执行动画时，它会在完成后设置margin-top:0;，所以第二次你的css类.pinned与margin-top :-100px; 没有效果...

你必须做几件事:

• 在动画完成后删除添加到 .pinned 元素的所有样式
• 仅运行一个动画(检查 .pinned 类是否已添加)
• 滚动到顶部时停止动画，以便 jquery 不再添加任何样式

Fiddle