在頁面頂部時更改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

回答

相關問題