如何使用不同类型的导航栏一个固定，一个静态使用不同的菜单项？

Question

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

例如，在上面的网站上，他们有故事，工作原理，博客和登录顶级菜单，当您在固定菜单中向下滚动时，“登录”会被“启动项目”按钮取代。

我们如何在bootstrap 3中使用css / jquery实现这一目标？

帮助将不胜感激。

谢谢。

Answer 1

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

Tutorial

Answer 2

您只需使用 afix

在bootstrap中应用

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

<强>更新 通过数据属性 要轻松地向任何元素添加词缀行为，只需将data-spy =“affix”添加到要侦听的元素即可。使用偏移来定义何时切换元素的固定。

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

您可以在需要展示时设置data-offset-top="200"。这是一个例子

DEMO http://jsfiddle.net/6P5sF/56/

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

Answer 3

以下是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;
}