Bootstrap. Scroll link menu and fix the navbar at the top of the page

Question

How can I do the following:

1. I want to have sticky nav bar - fixed navbar - (let's call it NavbarMain) on top of the page, but
2. when the page is not scrolled I want to have just on top of NavbarMain a row with some links - linkRow - (maybe like a second menu) that is not sticky/fixed.

so when the page is not scrolled I have

linkRow
NavbarMain

after the page is scrolled I have:

NavbarMain

the linkRow will scroll and NavbarMain will replace it and stick to the top.

Basically I want something similar with: http://www.w3schools.com/html/default.asp notice that when you scroll, the top part is hidden and the menu take place? How can I implement that in bootstrap.

Thank you

Answer 1

Set up the affix plugin

You need to use the affix plugin. It's a standard Bootstrap component.

This plugin makes the block fixed when the page is scrolled on the data-offset-top pixels:

Pixels to offset from screen when calculating position of scroll.

So you don't need to use the .navbar-fixed-top class. But you have to set some CSS properties for fixed navbar by the .navbar.affix class:

• The top: 0; property sets the vertical position of the fixed navbar;

• Properties left: 0; right; 0; force the navbar to expand to the width of the screen.

Avoid of page jumping

When the navbar becomes fixed it loses its space on the page. You've got two troubles at this moment:

• A text below the navbar jumps up and hides under the navbar.

• Page height decreases. If it becomes less than the height of the window, the page scrolls down and the plugin returns the navbar to its place. It looks as if the navbar does not allow the page to go up.

So you need a CSS trick. Add margin-bottom to the block before the navbar and add negative margin-top to the navbar. The value of both margins must be equal to the height of the unfixed navbar.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.above {
  margin-bottom: 70px;
}
.navbar {
  margin-top: -70px;
}
.navbar.affix {
  margin-top: 0 !important;
  left: 0;
  right: 0;
  top: 0;
}

<div class="container above">
  <h1>Hello</h1>
</div>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="70">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
      </ul>
    </div>
  </div>
</nav>  

<div class="container">
  <p>Paragraph 1.</p><p>Paragraph 2.</p><p>Paragraph 3.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>