javascript - 创建粘性导航 css 和 jquery

Question

我目前正在为一个网站制作粘性导航，我遇到了一些问题，当导航变成 position:fixed 时，它似乎跳了起来，看起来“笨拙”，在这里是我正在尝试做的 fiddle ，

http://jsfiddle.net/DKtLR/

理想情况下，结果是用户滚动并且导航不在固定位置，直到它滚出视口(viewport)然后固定并滑回 View 。

Answer 1

因为你只希望它在完全离开视口(viewport)时固定，然后滑入，只需修改 top 属性，然后将其动画化回 View 。参见 this fiddle一个工作示例。

更新

This updated fiddle应该工作得更好，因为它只应用尚未应用的行为，并在返回到正常的“静态”位置时完全删除动态样式。

请注意，向上滚动时仍然会出现闪烁 - 这是因为导航从其固定位置“跳”回其静态位置。这可以使用与上述动画类似的技术轻松解决。