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);
    }
});

这是一个证明我的问题以及我想要实现的目标的方法：http://jsfiddle.net/DzTRb/4/

Answer 1

当jquery正在制作动画时，它会在完成后设置margin-top:0;，因此第二次使用.pinned的css类margin-top:-100px;无效...

你必须做一些事情：

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

Fiddle

Answer 2

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

在这里看我的小提琴; http://jsfiddle.net/DzTRb/17/ 这有点气质 - 如果你滚得太快它似乎没有删除margin-top，但是，你明白了。

在jQuery中使用动画，粘性导航问题

2 个答案: