jquery - 在页面顶部更改 div 高度 - 长时间延迟？- jQuery

Question

抱歉，如果这是最基本的问题 - 我是 jquery/javascript 的新手！我环顾四周寻找答案，但我真的不知道要搜索什么！

我想要一个固定的导航栏，如果用户不在页面顶部，它会缩短，这对我来说很好：

http://jsfiddle.net/2NW6u/

$(document).ready(function(){

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() < 10) {
            $('#headerContent').animate({paddingTop: '18px', paddingBottom:'18px'}, 300);
        } else {
            $('#headerContent').animate({padding: '0px'}, 300);
        }
    });

});

});

...但是当我滚动到页面顶部时会出现相当长的延迟，这是什么原因造成的，我该如何解决？

Answer 1

发生这种情况是因为该scroll事件被多次触发，并且每次触发时，您都会排队一个新的动画..

您每次都需要清除队列（通过使用.stop()）..

if ($(this).scrollTop() < 10) {
    $('#headerContent').stop(true, false).animate({
        paddingTop: '18px',
        paddingBottom: '18px'
    }, 300);
} else {
    $('#headerContent').stop(true, false).animate({
        padding: '0px'
    }, 300);

演示在 http://jsfiddle.net/gaby/2NW6u/4/

Answer 2

尝试这个：

if ($(this).scrollTop() < 10) {
    $('#headerContent').stop().animate({paddingTop: '18px', paddingBottom:'18px'},300);
} else {
    $('#headerContent').stop().animate({padding: '0px'}, 300);
}

小提琴：http: //jsfiddle.net/2NW6u/9/