twitter bootstrap affix / scrollspy宽度和滚动问题

Question

我几乎完成了所有的工作：http://firestream.net/2013/index.php?go=stats

下面是我遇到的两个问题：

1)向下滚动时，我希望侧边导航列表停留在屏幕的最上方，而不是当前所在的位置。2)向下滚动时，导航列表的宽度会缩小

<div class="row">
    <div class="span3">
        <ul class="nav nav-list" id="sidenavbar">
              <li class="active"><a href="#top10pt"><i class="icon-chevron-right"></i> Top 10 Pages Today</a></li>
              <li class=""><a href="#top10pa"><i class="icon-chevron-right"></i> Top 10 Pages Alltime</a></li>
              <li class=""><a href="#daily"><i class="icon-chevron-right"></i> Daily Stats</a></li>
              <li class=""><a href="#top10rt"><i class="icon-chevron-right"></i> Top 10 Referalls Today</a></li>
        </ul>
    </div>

    <div class="span9" id="content">
       <section id="top10pt">
       ...
       </section>
       <section id="top10pa">
       ...
       </section>
       <section id="daily">
       ...
       </section>
       <section id="top10rt">
       ...
       </section>
    </div>
</div>

<script>
$('#sidenavbar').affix();
$('body').scrollspy();
</script>

任何帮助或建议都是很棒的！

Answer 1

通过使用下面的CSS，当附加插件将.affix类添加到项目中时，#sidebarnav将被定位。.affix类将使定位固定，正如文档中所提到的，您应该自己进行定位。

#sidebarnav.affix {
  top: 56px;
}

read the docs：必须管理固定元素的位置及其直接父级的行为。位置由词缀、词缀-顶部和词缀-底部控制。记住，当词缀从页面的正常流中移除内容时，要检查是否有可能折叠的父元素。

Answer 2

我最近不得不用我的scrollspy来解决类似的问题。

首先，应该将词缀类应用于元素。原因是scrollpy函数将查找这个类，并根据用户在页面上的位置或文档是否刚刚加载，将其从affix更改为affix-top。这将有助于解决您的位置问题，因为scrollspy对象将位于正常的文档流中，直到用户开始滚动。

• 注意，确保在出现affix类时为对象创建一个链选择器，以便您可以将其定位在远离页面顶部的位置。像ul.nav.affix：{top：##px;}这样的东西对我来说效果很好。

其次，当应用affix时，您会将其从正常文档流中删除，因为position: fixed；会被应用。如果你使用一个相对单位来定义你的scrollspy的宽度，它会改变它的宽度，因为scrollspy的宽度和它的父对象之间的关系已经改变了(它有一个不同的父对象，不再包含在你的span-3‘ul中)。