Javascript 引导3：自动夹附侧导航

我已经玩了一段时间了，但没办法让它工作，或者在这里找到一个类似的问题

这是你的电话号码

我们有一个包含可变数量链接的附加侧导航。当链接数量变大时，侧导航超出可用高度。我想根据可用高度（不包括在视图中的页脚）垂直剪裁它。我的意思是，当项目被剪裁时，应该会出现一个滚动条

有没有人研究过类似的问题？如果你能分享你的经验，我将不胜感激。如果设计不合理，请告诉我：）

我在这里加入了一些代码，让s.o.感到高兴：

HTML:

CSS:

---

因为元素的位置是固定的，所以很棘手。尝试修改您的

。粘贴
类：

#sidenav.affix{
顶部：50px；
z指数：1；
宽度：212.5px；
底部：0；/*li>a{
边界半径：0！重要；
页边顶部：-1px；
}
.nav>li:第一个孩子>a{
边框左上半径：4px！重要；
边框右上角半径：4px！重要；
}
.nav堆栈>li:最后一个子项>a{
页边距底部：0！重要；
边框右下半径：4px！重要；
边框左下半径：4px！重要；
}
/*修复锚位于顶部导航栏后面的问题*/
#主要成分h2 a{
显示：块；
位置：相对位置；
顶部：-100px；
}

测试页


测试页面
标题









































页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚
页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚

太棒了！我不知道
底部的属性。我正在尝试将您的答案调整到我的主属性（响应性）页面，但您知道如何防止侧导航与页脚重叠吗？这很棘手，请参阅。引导粘贴接受底部偏移，这可能是页脚的高度。否则，您可以提供一个函数来动态计算底部偏移。
<!-- Main Content -->
<div id="main-content" class="col-xs-9">
    <h2>Heading<a id="1"></a></h2>
    <p>Lorem ipsum ...</p>
    <h2>Heading<a id="2"></a></h2>
    <p>Lorem ipsum ...</p>
</div>
<!-- Sidebar -->
<div id="sidebar" class="col-xs-3">
    <div id="sidenav" role="navigation">
        <h3>Contents</h3>
        <ul class="nav nav-pills nav-stacked">
            <li><a class="list-group-item" href="#1">Heading</a></li>
            <li><a class="list-group-item" href="#2">Heading</a></li>
        </ul>
    </div>
</div>

// activate scrollspy and affix for sidenav
$('body').scrollspy({ target: '#sidenav' });
$('#sidenav').affix({
  offset: {
    top: 165
  }
})

#sidenav.affix {
    top: 50px;
    z-index: 1;
    width: 212.5px;
}
#sidenav {
    margin-bottom: 20px;
}