我想修复左侧导航列表，使其保持在导航栏之下

Question

我想做这样的事情：

http://twitter.github.io/bootstrap/components.html

其中有一个导航栏，一个“巨型加速器”，导航列表位于左侧。它位于巨型加速器的下方，但当你向下滚动时，它也会滚动，直到它到达导航栏，然后它也会随之向下滚动。

到目前为止，我有它，所以它与页面一起向下滚动，但顶部的页边距是navbar+jumbotron，所以一旦我向下滚动，就会有大量的空白。我似乎在源代码中找不到答案。

我已经通过固定左侧导航列表的位置并将内容浮动到右侧浮动上来做到这一点:左侧带有左边距。

谢谢你的帮助。

<!-- start page wrap -->
<div id="wrap">

<!-- START NAV -->

<div class ="navbar navbar-inverse navbar-fixed-top">
    <div class="navinner">
    <div class="container">
        <ul class="nav pull-right helfont">
          <li><!-- TOP NAV BAR LIST HERE -->
        </ul>
    </div> 
  </div> 
</div> 



<!-- END NAV -->  


<div id="faq" class="container">

<div class="title">
    <h1> Frequently Asked Questions </h1>
</div>  

<div class="row">
     <div class="span3 offset1 faq-list">
      <ul class="nav nav-list" style="padding-left: 20px;">
      <li> <!-- NAV LIST HERE THAT I WANT ON LEFT -->
      </ul>
   </div>
 </div>

<div class="span7 offset3 faq-content">
  <!-- CONTENT ON RIGHT HERE -->
</div>

css：

 #faq {
 margin-top: 30px;
}

#faq .row {
margin-top: 40px;
 }

.faq-list {
position: fixed;
}

.faq-content {
 margin-left: 320px !important;
 float:left;
}

Answer 1

在您引用的页面上，一旦jumbotron滚动走，左导航冻结的行为似乎是使用文件"bootstrap-affix.js“中包含的javascript实现的。如果您使用的是bootstrap框架，我相信您可以简单地通过将"affix“类应用于有问题的元素来获得该行为：

 <ul class="nav nav-list affix" style="padding-left: 20px;">

您可能还应该删除您添加的margin-top和position: fixed，如果您使用bootstrap的内置affix行为，则不需要使用它们来实现此效果。