Bootstrap Affix - 如何使用 jquery 制作 bootstrap 词缀？

Question

我在这里有一个 jsfiddle https://jsfiddle.net/okiewardoyo/twkthn44/2/
那把小提琴完美无缺。使用 data-offset-top 和 data-offset-bottom 引导词缀工作。
我的问题是，如果我的页眉和页脚是动态的呢？这两者的高度总是在每一页上改变。

目前，我使用手动高度进行词缀。

data-spy="affix" data-offset-top="100" data-offset-bottom="600"

如何使用 jquery 计算我的页眉高度和页脚高度，以及如何实现它以使 affix 工作？谢谢

Answer 1

对于词缀我是这样动态设置的

$('#sidebar-affix').affix({
      offset: {
        top: $('.navbar').height(),
        bottom: function () {
          return (this.bottom = $('.footer-section').outerHeight(true) + 50)
        }
      }
});

**************更新**************

看完你的小提琴后，试试这些改变

javascript

$('#nav1').affix({
    offset: {
        top: $('header').height(),
        bottom: function () {
            return (this.bottom = $('footer').outerHeight(true) + 50)
        }
    }
});

html（删除data-spy="affix"）

<ul id="nav1" class="nav nav-pills nav-stacked">
    <li><a href="#">Section One</a></li>
    <li><a href="#">Section Two</a></li>
    <li><a href="#">Section Three</a></li>
</ul> 

css

@media (min-width: 979px) {
    #nav1.affix-bottom {
        position: relative;
        margin-top:25px;
    }

    #nav1.affix-top {
        position: static;
        margin-top:25px;
    }

    #nav1.affix {
        position: fixed;
        top:25px;
    }
}

#nav1.affix-top{
    position:static;
}

#nav1.affix-bottom {
    position: relative 
}

@media 不是必需的，但你明白了。

这是您更新后的fiddle