固定在自举中的边栏，从某个位置开始

Question

以防万一有人发现这个问题寻找答案，感谢timemachine3030我现在有一个解决这个问题的方法。

侧边栏现在看起来是这样的：

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span4"> 
      <ul class="nav nav-list" data-spy="affix" data-offset-top="750"> 
     <li><a href="#one"><i class="icon-chevron-right"></i> One</a></li> 
     <li><a href="#two"><i class="icon-chevron-right"></i> Two</a></li> 
     <li><a href="#three"><i class="icon-chevron-right"></i> Three</a></li> 
     <li><a href="#four"><i class="icon-chevron-right"></i> Four</a></li> 
     <li><a href="#five"><i class="icon-chevron-right"></i> Five</a></li> 
     <li><a href="#six"><i class="icon-chevron-right"></i> Six</a></li> 
     <li><a href="#seven"><i class="icon-chevron-right"></i> Seven</a></li> 
    </ul> 

    </div><!--/span--> 

我们还增加top: 60px;到.affix在bootstrap.css文件有了这个加什么我已经有（如下图所示），我已经成功地重新创建了“粘性“边栏极靴Bootstrap使用：http://twitter.github.io/bootstrap/javascript.html#affix

timemachin3030：非常感谢您的解决方案！我希望你不要联想到你的个人资料！

---

好吧，我使用引导，什么，我想实现

完美的例子：http://twitter.github.io/bootstrap/components.html

我有一个固定的侧栏导航菜单固定这意味着它与页面滚动。

当您向下滚动页面后的页面时，它现在从页面顶部开始“英雄单元顶部”。

我希望它从实际内容的开始处开始，其中导航实际开始。

以下是使用bootstrap的html页面的一部分。

<div class="hero-unit"> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8"> 
     <div id="myCarousel" class="carousel slide"> 
      <!--Carousel items --> 
      <div class="carousel-inner"> 
      <div class="active item"><img src="img/carousel/photo1.jpg"></div> 
      <div class="item"><img src="img/carousel/photo2.jpg"></div> 
      <div class="item"><img src="img/carousel/photo3.jpg"></div> 
      </div> 
     </div> 
     </div> 
     <div class="span4"> 
     <h2>The Green Panda</h2> 
     <p>Professional Web Design</p> 
     <a href="#scrollhere" class="btn btn-primary btn-large">Learn More</a> 
     </div> 
    </div> 
    </div> 
</div> 
<div> 
    <h2 align="center" id="scrollhere">Professional Web Design</h2> 
    <h3 align="center">Powerful. Professional. Affordable</h3> 
    <hr> 
</div> 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span4"> 
     <div class="well sidebar-nav-fixed" data-spy="affix" data-offset-top="300"> 
     <ul class="nav nav-list"> 

      <li class="nav-header">Sidebar</li> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="nav-header">Sidebar</li> 

      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 

      <li class="nav-header">Sidebar</li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </div><!--/.well --> 
    </div><!--/span--> 
    <div class="span8"> 

     <h3>What We Do</h3> 
     <p>Here at The Green Panda, we provide custom website development as our main strong hold. Web design was the primary reason for opening The Green Panda!</p> 

     <p>Throughout the last year we have worked very hard to provide our clients with more solutions. All of our hard work has paid off, we now provide an on line site builder and custom printed promotional products. This is on-top of our custom web design we have provided from day one.</p> 

     <h3>Our Solutions</h3> 
     <p>Once a year we distribute a survey to our clients, the bars below dictate what our clients have ranked us within the last year on the solutions we offer. We believe it's important for you as a future client to have a firm understanding of what we are capable of.Click on each bar to find out more information.</p> 
     <strong>Web Design</strong> 100% 
     <div class="progress progress-success progress-striped active"> 
     <div class="bar" style="width: 100%;" id="webdesign-bar" rel="popover" data-content="We are very proud to present a perfect rating in web design for the year 2012!" data-original-title="Our Main Focus" data-placement="top"></div> 
     </div> 

为了让侧边栏是固定的我加入这个额外的CSS：

.sidebar-nav-fixed { 
    position: fixed; 
    top: 60px; 
    width:21.97%; 
} 

@media (max-width: 767px) { 
    .sidebar-nav-fixed{ 
    width:auto; 
    } 
} 

@media (max-width: 979px) { 
    .sidebar-nav-fixed { 
    position: static; 
    width: auto; 
    } 
} 

Answer 1

幸运的是内置于引导。这是一个名为'Affix'的功能，请参阅：http://twitter.github.io/bootstrap/javascript.html#affix了解如何使用它！