粘性导航栏 - Bootstrap答案

【问题标题】：Sticky navbar - Bootstrap粘性导航栏 - Bootstrap
【发布时间】：2015-08-06 19:25:08
【问题描述】：

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

这里是主要代码：

.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');
  });
});

但它并没有真正起作用。

我的问题是如何解决用户滚动时出现“跳跃”（内容上升）的行为？

【问题讨论】：

标签： jquery twitter-bootstrap navbar nav sticky

【解决方案1】：

请看这里： 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);

【讨论】：

【解决方案2】：

当您滚动“navBar 高度”时不要粘贴导航栏，而是在滚动“标题”高度（或标题高度加上其填充 + 边距）时执行此操作

【讨论】：

示例中header高度为100px

【解决方案3】：

你的样式应该是这样的。
.goToTop { position: fixed; top: 0; height: 70px; width:100%; z-index: 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'); } }); });

【讨论】：

之前，我还没有在 jsfiddle 中看到你的代码。不过现在查了一下。好像您已经为父 div 使用了 container 类。如果你使用container-fluid 会更好，因为它会跨越整个宽度。

【解决方案4】：

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

.addSpace {
    padding-top : 60px;
}

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

$(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，但你可以使用任何你能想到的选择器）。

【讨论】：