0

我想做这样的事情：

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

哪里有一个导航栏，一个“jumbotron”，导航列表位于左侧。它位于 jumbotron 下方，但是当您向下滚动时，它也会滚动，直到它碰到导航栏，然后它会随之向下滚动。

到目前为止，我拥有它，所以它会随着页面向下滚动，但顶部的边距是导航栏 + jumbotron，所以一旦我向下滚动，就会有大量的空白。我似乎无法在源代码中找到答案。

我通过固定左侧导航列表的位置并将内容浮动到右侧 float:left 上并留有左边距来完成此操作。

谢谢你的帮助。

<!-- 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;
}
4

1 回答 1

0

在您引用的页面上，一旦 jumbotron 滚动离开，左导航冻结的行为似乎是使用文件“bootstrap-affix.js”中包含的 javascript 实现的。如果您使用的是引导框架，我相信您只需将“附加”类应用于相关元素即可获得该行为：

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

您可能还应该删除您添加的margin-topand ，如果您使用引导程序的内置行为position: fixed，这对于实现效果不是必需的。affix

于 2013-07-08T14:29:20.327 回答