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

Question

How can we have fixed navigation bar having same behaviour like this on website https://ooomf.com/ and also with two different type of menu items.

For example on the website above they have stories, how it works , blog and login at the top menu and when you scroll down in fixed menu "login" gets replaced with "start your project" button.

How do we accomplish that using css/jquery in bootstrap 3 ?

Help would be appreciated.

Thank you.

Answer 1

It is called a sticky navigation bar. Now you can find many variations of this but here is a great tutorial for a simple one.

Tutorial

Answer 2

You simply apply in bootstrap with afix

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

Update Via data attributes To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

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

You can set up on data-offset-top="200" when you need to show. here is the example

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

Reference: http://getbootstrap.com/javascript/#affix

Answer 3

Here is an example with 2 navbars. The affix component is used to pin the 2nd navbar to the top once the user has scrolled past the top header. You can use CSS z-index to position the 2nd navbar over the first...

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;
}