1

我几乎已经完成了所有工作： 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>

任何帮助或建议都会很棒！

4

2 回答 2

5

通过使用以下 CSS，#sidebarnav将在词缀插件将.affix类添加到项目时定位。该.affix课程将使定位固定，并且如文档中所述，您应该自己进行定位。

#sidebarnav.affix {
  top: 56px;
}

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

于 2013-02-11T23:46:16.873 回答
0

我最近不得不用我的滚动间谍解决类似的问题。

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

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

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

于 2014-09-24T21:07:41.020 回答