固定在自舉中的邊欄，從某個位置開始

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瞭解如何使用它！