如何拥有两种不同类型的导航栏，一种是固定的，一种是静态的，具有不同的菜单项

Question

我们如何在网站 https://ooomf.com/上具有相同行为的固定导航栏以及两种不同类型的菜单项。

例如，在

上面的网站上，他们有故事，它是如何工作的，顶部菜单中的博客和登录，当您在固定菜单中向下滚动时，"登录"将被替换为"开始您的项目"按钮。

我们如何在引导程序 3 中使用 css/jquery 来实现这一点？

帮助将不胜感激。

谢谢。

Answer 1

下面是一个包含 2 个导航栏的示例。affix组件用于在用户滚动到顶部标题后将第二个导航栏固定到顶部。您可以使用 CSS z-index将第二个导航栏定位在第一个导航栏上。

http://www.bootply.com/118680

#topNav {
    z-index:-1;
}
#nav {
  width: 100%;
  position:static;
  top:-32px;
}
#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
   -webkit-transition: all .6s ease-in-out;
}

Answer 2

它被称为粘性导航栏。现在你可以找到它的许多变体，但这里有一个简单的教程。

教程

Answer 3

您只需使用 afix 在引导程序中应用

$('#navbar').affix({
  offset: {
    top: 50
  }
});

更新通过数据属性要轻松地为任何元素添加附加词，只需将 data-spy="affix" 添加到您要监视的元素即可。使用偏移量定义何时切换元素的固定。

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

您可以在需要显示时进行data-offset-top="200"设置。 这是示例

演示 http://jsfiddle.net/6P5sF/56/

参考： http://getbootstrap.com/javascript/#affix