Bootstrap 固定导航栏答案

【问题标题】：Bootstrap Fixed Navigation BarBootstrap 固定导航栏
【发布时间】：2014-11-29 04:04:40
【问题描述】：

我目前正在使用 Bootstrap 构建一个网站，我想知道是否可以使用固定导航栏。我想在导航栏上方有内容（图片或文本），但是当您向下滚动页面时，导航栏会粘在顶部而没有上面的内容。关于如何做到这一点的任何想法？

【问题讨论】：

这就是词缀的用途

【解决方案1】：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    ...
 </div>

http://getbootstrap.com/components/#navbar

【讨论】：

【解决方案2】：

您可以使用一些简单的 jQuery 来完成。这是一个工作示例http://jsfiddle.net/pqLen8p0/3/。

关键是使用 $(window).scroll() 作为 jQuery 的包装。然后使用 $(window).scrollTop() 找到你的窗口滚动位置。

$(window).scroll(function(){
var nav = $('.nav');
var height = $(window).scrollTop();
if (height > 100) {
    if (!nav.hasClass('fixed')) {
        nav.addClass('fixed');
    }
} else {
    if (nav.hasClass('fixed')) {
        nav.removeClass('fixed');
    }
  }
});

【讨论】：

【解决方案3】：

您可以使用引导程序中使用的 Affix 组件。这是工作的jsfiddle。 http://jsfiddle.net/xpzy2ko5/

JavaScript：

$('.navbar').affix({
  offset: {
    top: $('header').height()
  }});

CSS：

.navbar.affix {
    top : 0;
    width: 100%;
    z-index: 2; }

【讨论】：

看来我对自己面临的挑战也越来越热情了。要获得像本网站sothebysrealty.com/eng 这样的导航效果，使用 affix 是正确的做法吗？