滑動導航欄 - 他們是如何做到的？

Question

我想弄清楚如何獲得這個滑動導航條效果：http://manoscrafted.com/。我可以儘可能地固定頂級英雄形象並上下滑動底部導航欄，但是，它並不會粘在頂部。

這是通過JavaScript完成還是我缺少CSS中的東西？

謝謝！

Answer 1

使用JavaScript實現的，大多數人會稱之爲「視差」與「固定」或「粘」頁眉/導航滾動

見視差的例子：

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

見粘/固定例子：

http://jsfiddle.net/tovic/2jqCA/

var win  = $(window), 
    fxel  = $('nav'), 
    eloffset = fxel.offset().top; 

win.scroll(function() { 
    if (eloffset < win.scrollTop()) { 
     fxel.addClass("fixed"); 
    } else { 
     fxel.removeClass("fixed"); 
    } 
});