Bootstrap3附加导航栏低于100％宽度图像向上滚动然后返回到原始位置

Question

我在全宽英雄图像下面的导航栏上设置了词缀，所需的结果是导航栏向上滚动，一旦它触及页面顶部就会粘住。 问题是，图像高度是动态的，它是全宽图像，因此我无法为偏移设置固定的像素高度。我正在使用jquery根据导航栏位置设置偏移量，但导航栏一旦到达顶部就会跳回到原始位置。

此CSS应在应用.affix时定位导航栏

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

这是生成词缀的jQuery

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

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

这是一个jsfiddle： http://jsfiddle.net/MarkMarine/q3J56/4/

我根据下面的回复进行了一些编辑（并稍微调整了一下） 对我来说，修复是选择.hero-image类的高度，而不是导航栏的位置。

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

谢谢!!! 为后代更新了jsfiddle

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

Answer 1

$('#nav').affix()为您的ID .affix添加课程#nav。在CSS中，您使用#navbar-wrapper.affix此选择器选择具有两个类的元素。因此，请使用#nav.affix或在第一个选择器#navbar-wrapper .affix中添加空格。