滑动导航栏 - 他们是如何做到的？

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");
    }
});