Bootstrap动态调整大小 [英] Bootstrap affix dynamically on resize

问题描述

我有一个100％的高度div，下面有一个nav，下面有更多的内容。

I have a 100% height div with a nav underneath it and more content under that.

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

When the user scrolls passed the nav it sticks to the top of the page and when the user goes back to the 100% height div the nav is left behind.

由于div是100％的高度，导航的data-offset-top需要动态更改。

As the div is 100% height the 'data-offset-top' for the nav needs to change dynamically.

以下代码适用于：

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

但是当我调整页面大小时，偏移量的值不会被读取到偏移量。

However when I resize the page the value of the offset does not get readded to the offset.

以下代码检查要更改的页面高度，然后将新高度赋给data-offset-top，但它不会有函数affixChange（）
{

The following code checks for the page height to change and then gives the new height to the data-offset-top but it does not ` function 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. 有更好的方法吗？

推荐答案

Bootstrap让你可以通过动态计算偏移量的函数：

Bootstrap gives you the possibility to pass a function to calculate the offset dynamically:

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

这篇关于Bootstrap动态调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！