Bootstrap3词缀导航栏在100%宽图像下向上滚动，然后返回原来的位置

Question

我有一个导航栏设置在一个全宽度英雄图像下面，希望的结果是导航条滚动，一旦它接触到页面顶部，它就会粘上。问题是，图像高度是动态的，它是一个全宽度的图像，所以我不能为偏移量设置一个固定的像素高度。我使用jquery根据导航条的位置设置偏移量，但导航栏一到达顶部就会跳回到原来的位置。

当应用.affix时，这个CSS应该定位我的导航条。

#navbar-wrapper.affix {
top: 0px;
position: fixed;
width: 100%;
}

这是生成词缀的jQuery

$(function() {
   $('#navbar-wrapper').height($("#nav").height());
});

$('#nav').affix({
   offset: $('#nav').position()
});

下面是一个小摆设：http://jsfiddle.net/MarkMarine/q3J56/4/

我根据下面的响应做了一些编辑(并对其做了一些调整)，修复方法是为词缀偏移量选择.英雄图像类的高度，而不是导航栏的位置。

$('#navbar-wrapper').affix({
offset: {
    top: $('.hero-image').height()
  }
});

谢谢！为子孙后代更新的小提琴

http://jsfiddle.net/MarkMarine/q3J56/7/

Answer 1

$('#nav').affix()用id #nav向您的div中添加一个类.affix。在您的CSS中，您使用#navbar-wrapper.affix，此选择器选择具有两个类的元素。所以使用#nav.affix或者在第一个选择器#navbar-wrapper .affix中添加一个空格。