Twitter的Bootstrap固定到顶部导航栏滚动，页面内锚链接弹跳

Question

I have a web page with a top horizontal navigation bar – it is Twitter's Bootstrap Fixed Top Navbar to be more precise – with a bottom-fixed position (actually it's not really fixed by CSS; see JavaScript below) so the navigation bar will first be visible at the bottom of the page and later displayed at the top of the page when scrolling ( position: fixed; top: 0 ).

I have the navigation links set up with anchor tags to take the viewer to various places in the body of the page. Unfortunately, sometimes it takes the user a bit too far down (especially if the user is at the top of the page and the navigation bar has not yet became fixed).

Take a look at my HTML structure:

<div id="landing"></div>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#landing">Home</a></li>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

I'm using the following JavaScript to ensure that the navbar sticks to the top of the page after scrolling down:

function init() {
  nh = 50; // navbar height
  sh = $(window).height();
  ih = sh-nh;            
  $("#landing").css('height', ih+'px');
} 

function navbarState() {
  if ($(window).scrollTop() > ih) {
        $('.navbar').addClass('navbar-fixed-top');
      } else {
        $('.navbar').removeClass('navbar-fixed-top');
      }
}

init();
navbarState();

$(window).on('load scroll resize orientationchange', function () {
    init();
    navbarState();
});

One can observe that repeatedly pressing the first anchor link causes a bouncing effect. How can I prevent that?

My goal is to have the navigation scroll to the proper anchors, no matter whether the user is at the landing page or not.

Answer 1

Why not using navbar-fixed-bottom as well?

See here: https://jsfiddle.net/y7soL4ej/

---

I added the mentioned class as default to nav . And modified minor things:

CSS

html, body, div#landing {
  height: 100%
}
section, [id*=section] {
  padding-top: 52px;
}

JS

function init() {
  nh = 50 + 2; // navbar height + 2x border width (top + bottom)
  sh = $(window).height();
  ih = sh-nh;            
  //$("#landing").css('height', ih+'px');
}

function navbarState() {
  if ($(window).scrollTop() > ih) {
        $('.navbar').removeClass('navbar-fixed-bottom').addClass('navbar-fixed-top');
      } else {
        $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-fixed-bottom');
      }
}

init();
navbarState();

$(window).on('load scroll resize orientationchange', function () {
    init();
    navbarState();
});

---

The jumpy behaviour: When the navbar is at the bottom in your example it is part of the dom flow - it seperates the landing div and the section1 div by its height. As soon as it is clicked the browser jumps to the location, the navbar is then set as fixed at the top - and is no longer part of the flow (the both divs are no longer seperated by it). The section divs are therefore moved accordingly up to the landing div closing the gap. So clicking the same section anchor again will result in an additional jump, because the section was repositioned due to the landing div went from position:static to position:fixed .

That's an additional reason why I recommend to use navbar-fixed-bottom .

---

Update

new fiddle: https://jsfiddle.net/y7soL4ej/2/

I removed .navbar-fixed-bottom from HTML and JS as the navbar should not jump from bottom to top. To make it smooth and avoid the earlier mentioned jumpy behaviour, I had to set it to absolute position.

some CSS needed to be added:

div#landing {
  padding-bottom: 72px;
  margin-bottom: -72px;
}

nav.navbar {
  position: absolute;
  left: 0; right: 0;
}
nav.navbar.navbar-fixed-top {
  position: fixed;
}