Jquery：使用scrollTop製作動畫粘性菜單

Question

我正在嘗試創建一個動畫粘性菜單。

用戶加載頁面，導航是靜止的。然後，用戶向下滾動頁面，之後像500像素（在原始導航上滾動），導航使用固定定位將頁面粘貼到頂部。但是，一旦我向後滾動並重置菜單的位置，下一次向下滾動頁面時，它就不再生成動畫了，只是卡入到位。請參閱代碼模板：http://codepen.io/chrisyerkes/pen/uoFKl。我希望它像第一頁加載/滾動動作一樣動畫。

當您向上滾動可能導致問題的頁面時，它看起來像屬性style =「top：0px」不會被刪除。我嘗試使用removeAttr（）在返回滾動中刪除它，但它會一直彈出（自動）。

任何想法將非常感激。謝謝！

Answer 1

我已經更新了一點你的代碼，現在它按預期工作。它具有的優點是，如果需要而不是連續不斷地將所有東西都點燃一次。我還將選擇器存儲在一個變量中以避免大量的重新查詢。

的JavaScript

var nav = $('.nav'); 
var scrolled = false; 

$(window).scroll(function() { 

    if (500 < $(window).scrollTop() && !scrolled) { 
     nav.addClass('visible').animate({ top: '0px' }); 
     scrolled = true; 
    } 

    if (500 > $(window).scrollTop() && scrolled) { 
     nav.removeClass('visible').css('top', '-30px'); 
     scrolled = false;  
    } 
}); 

演示

Try befory buy