3

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

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

4

2 回答 2

3

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

你必须做几件事：

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

小提琴

于 2013-07-04T11:52:58.363 回答
1

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

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

于 2013-07-04T11:34:33.777 回答