jQuery 中的动画粘性导航问题答案

【问题标题】：Issue with an animated, sticky navigation in jQueryjQuery 中的动画粘性导航问题
【发布时间】：2013-07-04 19:52:58
【问题描述】：

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

到目前为止，这是我的 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/

【问题讨论】：

使用animate应用的元素样式优先级高于css规则

标签： jquery

【解决方案1】：

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

你必须做几件事：

在动画完成后移除添加到 .pinned 元素的所有样式
只运行一个动画（检查.pinned类是否已经添加）
滚动到顶部时停止动画，这样 jquery 就不会添加更多样式

Fiddle

【讨论】：

【解决方案2】：

当您滚动回页面顶部时，还需要删除您的 margin-top。

在这里看我的小提琴； http://jsfiddle.net/DzTRb/17/ 这有点喜怒无常——如果你滚动得太快，它似乎不会删除顶部边缘，但是，你明白了。

【讨论】：