javascript - Bootstrap 在调整大小时动态添加

Question

我有一个 100% 高度的 div，它下面有一个导航，下面还有更多内容。

当用户滚动通过导航时，它会停留在页面顶部，当用户返回到 100% 高度的 div 时，导航会被留在后面。

由于 div 是 100% 高度，因此导航的“data-offset-top”需要动态更改。

下面的代码适用于:

    $('#navigation').affix({
        offset: {
            top: $('#hero').height()
        }
    });

但是，当我调整页面大小时，偏移量的值不会重新添加到偏移量中。

以下代码检查页面高度是否发生变化，然后将新高度提供给 data-offset-top 但它没有`函数 affixChange() {

     $('#navigation').attr('data-offset-top', $('#hero').height());
    $('#navigation').affix({
        offset: {
            top: $('#hero').height()
        }
    }); 
 }

affixChange();
setInterval(function(){
 affixChange();
console.log($('#hero').height());
}, 1000)

1. 为什么我的方法不起作用？
2. 有更好的方法吗？

Answer 1

Bootstrap 使您可以传递一个函数来动态计算偏移量:

$('#navigation').affix({
  offset: {
    top: function() { return $('#hero').height(); }
  }
});