jquery - 带有全角图像的引导导航栏词缀

Question

我正在尝试使用 Bootstrap Affix 功能将我的导航栏放置在全角响应图像下方。当用户滚动并到达导航栏时，随着用户向下滚动，导航栏将固定在屏幕顶部。下面链接的 JSFiddle 帮助我进行了设置，但顶部偏移量似乎不是动态的。相反，它似乎被设置为英雄图像的原始高度。因此，当我扩大或缩小屏幕尺寸时，词缀不再按预期发挥作用。

JSFiddle在这里：http: //jsfiddle.net/MarkMarine/q3J56/7/

这是我用于 Javascript 以尝试使顶部偏移动态化的代码：

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

});

Answer 1

为了使词缀的顶部偏移属性动态化，您需要将其设置为函数。

例如，你的 js 可以是这样的：

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

一个 jsfiddle 在这里。