粘性导航栏 - Bootstrap

Question

我想在我的网站上有一个粘性导航栏，它应该在用户滚动到页眉后粘在页面顶部。

这里是主要代码：

.goToTop {
  position: fixed;
  top: 0;
  height: 70px;
  z-index: 1;
}


$(document).ready(function(){
  $(window).bind('scroll', function() {
    var navHeight = 100; // custom nav height
    ($(window).scrollTop() > navHeight) ? $('nav').addClass('goToTop') : $('nav').removeClass('goToTop');
  });
});

但实际上并没有用。

我的问题是如何解决当用户滚动时出现 'jumping'（内容上升）的行为？

Answer 1

不要在滚动 "navBar height" 时粘贴导航栏，而是在滚动 "header" 高度（或 header 高度加上其填充 + 边距）时执行此操作

Answer 2

看这里： http://jsfiddle.net/augburto/df8tb/1851/

您需要解决两个主要问题。

有一件事是您的 navHeight 不是导航的确切位置。您想要的是 nav 相对于视口顶部的位置。你可以通过这样做来做到这一点。

var navTop = $('#nav').offset().top;

我更改了命名约定，因为更准确地说是 navTop 而不是高度。

内容跳转的另一个问题是，当您将导航设置为 position: fixed 时，它会脱离文档流。解决这个问题的一种方法是计算 nav 的实际高度，然后设置位置以在导航卡住时将其偏移那么多。

var navHeight = $('#nav').height();
$('#content').css('top', navHeight);

Answer 3

你的造型应该是这样的。
.goToTop { 位置：固定；顶部：0；高度：70px； width:100%;<br> z-指数：2000； }
为什么我将 z-index 更改为 2000 是因为 bootstrap 为某些元素分配了 1000、1020 等的 z-index。所以如果你想要这个最重要的是，你的 z-index 应该是 2000.

你的脚本应该是这样的
$(document).ready(function(){ $(window).scroll(function(){ var navHeight = 100; if($(this).scrollTop() > navHeight ){ $('nav').addClass('goToTop'); } else{ $('nav').removeClass('goToTop'); } }); });

Answer 4

因为您将 nav 更改为 fixed，所以它不再有碰撞（布局，无论如何）。所以我们需要补偿额外的space。我们可以通过填充您的内容的顶部来做到这一点。

.addSpace {
    padding-top : 60px;
}

现在我们所要做的就是更新你的 JavaScript 把这个 class 放到你想要填充的东西上：

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var navHeight = 100; // custom nav height
        if ($(window).scrollTop() > navHeight) {
            $('nav').addClass('goToTop');
            $('#content').addClass('addSpace');
        } else {
            $('nav').removeClass('goToTop');
            $('#content').removeClass('addSpace');
        }
    });
});

它works perfectly！（我在内容元素中添加了一个 #content id，但是你可以使用任何你能想到的选择器）。

粘性导航栏 - Bootstrap

Sticky navbar - Bootstrap

jquery

twitter-bootstrap

navbar

nav

sticky