Question

我尝试制作一个在页面顶部不可见的简单粘性导航栏，并在向下滚动页面时向下滑动。首先我使用了scrollUp（）/ ScrollDown（），但我不喜欢它看起来的样子，因为它动画了高度，我想要动画位置。它只是看起来不同。所以我决定使用animate（）并将其应用于margin-top。

HTML：

<div>
...lots of blocks and text
</div>
<div class="top_bar">some elements here</div>

CSS：

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

JS：

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被动画关闭。我向下滚动页面，等待一秒钟，然后top_bar被动画化。

我不明白这个暂停的来源...... 请告诉我我做错了什么？

http://jsfiddle.net/hc31qds5/1/

Answer 1

您可能希望使用CSS3过渡来获得最具响应性的效果。试试这个：

CSS

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

JS

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

FIDDLE

更新

这里是没有延迟的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);
    }
});

FIDDLE

您只需确保stop()上一个动画。

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

1 个答案:

更新