由於滾動重新啓動功能導致的jQuery動畫問題

我在用戶向下滾動時滑動導航欄時出現問題。我的代碼工作 - 但如果你保持滾動（上下，或非常快），酒吧移動速度真的很慢，而不是它應該的速度。我認爲這是因爲該功能即使在動畫的中途重新開始，所以它必須移動一半的距離，但仍然保持相同的時間，就好像它必須穿過整個距離。我發現了幾種可能性，但他們都清除了動畫的隊列，我不能像在向下動畫完成之前滾動到頂部那樣做動畫，導航欄仍然可見，即使它不應該。所以基本上我想讓導航欄順暢地滑動，即使我一直向下滾動，但仍然需要阻止我從導航欄仍然可見的滾動到頂部。由於由於滾動重新啓動功能導致的jQuery動畫問題

的jsfiddle：

http://jsfiddle.net/bhaZ6/8/

我的代碼：

jQuery(document).ready(function() { 
    var offset = 220; 
    var duration = 500; 

    jQuery(window).scroll(function() { 
     if (jQuery(this).scrollTop() > offset) { 
      jQuery('#nav').stop(true).animate({'top': '0'}, duration, 'linear'); 
     } else { 
      jQuery('#nav').stop(true).animate({'top': '-72px'}, duration, 'linear'); 
     } 
    }); 
});

來源

2014-07-06 FDbomb

當滾動到達動畫點時只需執行一次動畫就需要設置一些標誌。 – adeneo

@adeneo非常感謝我現在得到它 – FDbomb

@VotetoClose爲我擺脫了流暢的動畫。感謝您的幫助，但我現在修復了它 – FDbomb

在動畫需要只運行一次，我創建了一個變量，名爲位置制約了「下來動畫」運行更比直到一個'up動畫'被稱爲和副vera。感謝adeno的想法

jQuery(document).ready(function() { 
    var offset = 220; 
    var duration = 300; 
    var position = 'up'; 

    jQuery(window).scroll(function() { 
     if (jQuery(this).scrollTop() > offset && position === 'up') { 
      jQuery('#nav').stop(true).animate({'top': '0'}, duration, 'linear'); 
      position = 'down'; 
     } else if (jQuery(this).scrollTop() < offset && position === 'down'){ 
      jQuery('#nav').stop(true).animate({'top': '-72px'}, duration, 'linear'); 
      position = 'up'; 
     } else { 
      return; 
     } 
    }); 
});

來源

2014-07-06 22:35:08 FDbomb

由於滾動重新啓動功能導致的jQuery動畫問題

回答

相關問題