jQuery animate（）在滚动暂停后激发

我正在尝试制作一个简单的粘性导航条，它在页面顶部不可见，当你向下滚动页面时会向下滑动。首先，我使用了scrollUp（）/ScrollDown（），但我不喜欢它的外观，因为它可以设置高度动画，而我想设置位置动画。只是看起来不一样。 所以我决定使用animate（）并将其应用于边距顶部

HTML:

JS:

问题是，它会在暂停一段时间后动画化。我将一个页面滚动到最顶端，它会等待一秒钟，然后顶部的_栏会被动画关闭。我向下滚动页面，它会等待一秒钟，然后打开顶部的_栏

我不明白这停顿是从哪里来的。。。 请告知我做错了什么

---

您可能希望使用CSS3转换来获得最灵敏的效果。试试这个：

CSS

JS

更新 这里是jquery动画，没有延迟：

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.top_bar').stop().animate({
            "margin-top": 0
        }, 200);
    } else {
        $('.top_bar').stop().animate({
            "margin-top": -70
        }, 200);
    }
});

---

您只需要确保

stop（）

上一个动画。

谢谢您的回答，但我需要支持IE8-9。而且，不管我是设置高度还是边距顶部的动画，暂停仍然存在。。。正如我在我的问题中所写的，我想制作边距动画，因为它看起来更好。谢谢，这正是我想要的。但是，正如您所说，确实存在一些性能问题。它在FireFox中运行缓慢，但在Chrome和IE11中运行快速平稳。如果您满意，请随意选择正确答案=P

.top_bar {
    margin-top: -70px; 
    height:70px; 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 1000; 
    background:#156373; 
    color: #fff; 
    text-align:center;
}

var stickyBar = function(){
    var scroll = $(window).scrollTop();
    if (scroll > 100) {
        $('.top_bar').animate({
            "margin-top": 0
        },"fast");
        } else {
        $('.top_bar').animate({
            "margin-top": -70
        },"fast");
    }
};
$(window).scroll(function() {  
    stickyBar();  
});

.top_bar {
    max-height: 0;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1000;
    background:#156373;
    color: #fff;
    text-align:center;
    transition: all 0.4s cubic-bezier(0, 1, 0.5, 1);
}
.top_bar.sticky {
    max-height: 70px;
    height: 70px;
}

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.top_bar').addClass("sticky");
    } else {
        $('.top_bar').removeClass("sticky");
    }
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.top_bar').stop().animate({
            "margin-top": 0
        }, 200);
    } else {
        $('.top_bar').stop().animate({
            "margin-top": -70
        }, 200);
    }
});