滑动导航栏——他们是怎么做到的？答案

【问题标题】：Sliding Navigation Bar - How Did They Do It?滑动导航栏——他们是怎么做到的？
【发布时间】：2014-02-21 00:19:52
【问题描述】：

我正在尝试弄清楚如何获得这种滑动导航栏效果：http://manoscrafted.com/。我可以修复顶部的英雄图像并上下滑动底部导航栏，但是它不会粘在顶部。

这是通过 JavaScript 完成的，还是我在 CSS 中遗漏了什么？

谢谢！

【问题讨论】：

他们正在使用这个插件code.google.com/p/sticky-panel

标签： javascript css navigation navbar sliding

【解决方案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");
    }
});

【讨论】：

太棒了！谢谢！我对 JavaScript 不太熟悉。如果我想使用一个类，而不是使用标签“nav”，我可以只做 $('.header'), 吗？然后关于 fxel.addClass("fixed");我会在我的 css 中为 .header.fix 创建一个新类吗？
简短的回答是肯定的。长答案是，当您开始更改某些内容时，您可能需要更改其他内容才能使一切恢复正常；)
谢谢！我会试着弄清楚。它还不能工作，但是当我滚动时，我确实会像闪光灯一样快速。希望我走在正确的轨道上。