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将被定位。 .affix类将使定位固定，并且如文档中所述，您应该自己进行定位。

#sidebarnav.affix {
  top: 56px;
}

read the docs：您必须管理固定元素的位置及其直接父级的行为。位置由affix，affix-top和affix-bottom控制。请记住，当词缀从页面的正常流程中删除内容时，会检查可能已折叠的父级。

Answer 2

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

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

请注意，请确保为词汇类设置时为对象创建链选择器，这样您就可以远离页面的顶部。像ul.nav.affix：{top：## px;}这样的东西对我很有用。

其次，当应用词缀时，将其从正常文档流中删除，因为位置：固定;得到应用。如果使用相对单位定义scrollspy的宽度，它将改变它的宽度，因为scrollspy的宽度与其父级的宽度之间的关系已经改变（它具有不同的父级，并且不再包含在内＆＃39; span-3＆＃39; ul）。

twitter bootstrap词缀/ scrollspy宽度和滚动问题

2 个答案: