1

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

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

#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/

4

1 回答 1

1

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

于 2013-12-06T09:07:48.543 回答