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

对不起，如果这是最基本的问题 - 我是一个总新手，当谈到jquery/javascript！我已经看了一个答案，但我真的不知道要搜索什么！在页面顶部时更改div高度 - 长延迟？ - jquery

我想有缩短固定的导航栏，如果用户不是在页面的顶部，这是对我工作的罚款：

$(document).ready(function(){ 

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

});

}）;

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

来源

2013-05-02 David

300毫秒延迟演示?? – 2013-05-02 13:04:34

这是因为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/

来源

2013-05-02 13:08:46

这工作，但给铬渲染线错误（webkit safari ???）。我们必须设置大纲属性来摆脱它：outline：1px solid transparent; http://jsfiddle.net/2NW6u/10/ – 2013-05-02 13:14:48

这正是我想要做的，谢谢！ – David 2013-05-02 13:16:53

@roasted，它似乎在我的Chrome（* v.26.0.1410.64 *）中工作正常，但感谢可能有助于所有这些问题的建议。 – 2013-05-02 13:17:33

试试这个：

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

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

来源

2013-05-02 13:05:32

我尝试过类似的东西，但显然动画变得非常跳动 - 我真正想做的事情是将300ms延迟应用于实际动画（滑动效果），但立即开始，而不是在开始之前等待300ms，然后开始进一步300毫米，以增加身高......至少我认为这是最新情况！ – David 2013-05-02 13:08:20

现在检查上面的内容。 – 2013-05-02 13:14:55

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

回答

相关问题