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(); }
  }
});

Answer 2

您是否尝试过监视窗口的调整大小事件？

    $(window).resize(function() {
  affixChange();
});