Question

很抱歉，如果这是最基本的问题 - 我在jquery / javascript方面总是新手！我已经四处寻找答案，但我真的不知道要搜索什么！

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

$(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/

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

2 个答案: