javascript - Bootstrap 。滚动链接菜单并修复页面顶部的导航栏

Question

我该如何执行以下操作:

1. 我想要在页面顶部有粘性导航栏 - 固定导航栏 - (我们称之为 NavbarMain)，但是
2. 当页面不滚动时，我想在 NavbarMain 的顶部有一行带有一些链接的行 - linkRow - (可能像第二个菜单)不粘/固定。

所以当页面没有滚动时我有

linkRow
NavbarMain

页面滚动后我有:

NavbarMain

linkRow 将滚动，NavbarMain 将替换它并粘在顶部。

基本上我想要类似的东西: http://www.w3schools.com/html/default.asp请注意，当您滚动时，顶部部分被隐藏并且菜单出现？我如何在 Bootstrap 中实现它。

谢谢

Answer 1

Bootstrap 有一个名为“Affix”的插件，我认为它可以提供您想要的功能。

只需包含 this Javascript file在您的 HTML 中:

并阅读documentation here有关如何使用它的说明。

文档中的示例:

<div data-spy="affix" data-offset-top="60">
</div>

当您滚动经过它时，div 的 60 像素应该在屏幕顶部可见。