javascript - Twitter 的 Bootstrap 固定到顶部的导航栏滚动，页内 anchor 链接跳动

Question

我有一个带有顶部水平导航栏的网页——更准确地说，它是 Twitter 的 Bootstrap Fixed Top Navbar——底部固定位置(实际上它并不是由 CSS 真正固定的；请参阅下面的 JavaScript)所以导航栏将首先在页面底部可见，然后在滚动时显示在页面顶部(position: fixed; top: 0)。

我设置了带有 anchor 标记的导航链接，以便将查看者带到页面正文中的各个位置。不幸的是，有时它会让用户走得太远(尤其是当用户位于页面顶部并且导航栏尚未固定时)。

看看我的 HTML 结构:

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

我正在使用以下 JavaScript 来确保导航栏在向下滚动后保持在页面顶部:

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

可以观察到重复按下第一个 anchor 链接会导致弹跳效果。我怎样才能防止这种情况发生？

我的目标是让导航滚动到正确的 anchor ，无论用户是否在着陆页。

Answer 1

为什么不同时使用 navbar-fixed-bottom？

参见此处:https://jsfiddle.net/y7soL4ej/

---

我将提到的类作为默认添加到 nav。并修改了一些小东西:

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

---

跳动的行为:当导航栏在您的示例中位于底部时，它是 dom 流的一部分 - 它通过其分隔 landing div 和 section1 div高度。一旦点击它，浏览器就会跳转到该位置，然后将导航栏设置为固定在顶部 - 并且不再是流程的一部分(两个 div 不再被它分开)。因此，section div 会相应地向上移动到 landing div 以缩小差距。因此，再次单击同一部分 anchor 将导致额外的跳转，因为由于 landing div 从 position:static 到 position:fixed 而重新定位了该部分。

这是我推荐使用 navbar-fixed-bottom 的另一个原因。

---

更新

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

我从 HTML 和 JS 中删除了 .navbar-fixed-bottom，因为导航栏不应该从底部跳到顶部。 为了使其平滑并避免前面提到的跳跃行为，我必须将其设置为绝对位置。

需要添加一些 CSS:

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

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