引導3關 - 帆布工具欄菜單像Facebook的

Question

我使用引導3的一些實例爲當它到達移動關閉帆布側邊欄菜單，在這裏可以看到：http://jsfiddle.net/AllenDB/9aAjJ/

我將如何去獲得將畫布外菜單調整爲像Facebook的搜索/朋友在線外畫布菜單一樣，始終從菜單頂部開始，您只能在內部滾動？與我的例子一樣，導航欄是固定的，因此可以切換側邊欄菜單。但是當您向下滾動實際頁面並切換菜單時，您必須向後滾動才能看到鏈接。我希望看到如何將此調整到菜單從頂部開始的位置，並將內容和固定導航欄放到一邊，同時可以在菜單內滾動而不是內容？

的CSS：

html, 
    body { overflow-x: hidden; } 
    body { padding-top: 70px;} 
    .navbar { color: #FFF; } 
    footer { padding: 30px 0; } 


    /* 
    * Off Canvas 
    * -------------------------------------------------- 
    */ 
    @media screen and (max-width: 767px) { 
     .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } 

     .row-offcanvas-right 
     .sidebar-offcanvas { right: -50%; /* 6 columns */ } 

     .row-offcanvas-left 
     .sidebar-offcanvas { left: -50%; /* 6 columns */ } 

     .row-offcanvas-right.active { right: 50%; /* 6 columns */ } 

     .row-offcanvas-left.active { left: 50%; /* 6 columns */ } 

     .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } 
    } 

的HTML：

 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
      <p class="pull-left visible-xs"> 
       <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> 
      </p> 

      <div class="col-xs-2 col-lg-3"> 
       <p>LOGO</p> 
      </div> 
      <div class="col-xs-6 col-lg-5"> 
       <p>SEARCH BAR</p> 
      </div> 
      <div class="col-xs-4 col-lg-4"> 
       <p>TWO LINKS</p> 
      </div> 
     </div> 


     <div class="row row-offcanvas row-offcanvas-left"> 
      <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> 
       <div class="list-group"> 
        <a href="#" class="list-group-item active">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
        <a href="#" class="list-group-item">Link</a> 
       </div> 
      </div><!--/span--> 

      <div class="col-xs-12 col-sm-9"> 
       <div class="jumbotron"> 
        <h1>Hello, world!</h1> 
        <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p> 
       </div> 
       <div class="row"> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
        </div><!--/span--> 
       </div><!--/row--> 
      </div> 
     </div><!--/row /row-offcanvas-left--> 

     <hr> 

     <footer> 
     <p>&copy; Company 2013</p> 
     </footer> 

Answer 1

如果我理解這個問題，我認爲你在尋找獨立的主要內容有側邊欄滾動。

看是否有此Bootply例如工程..

http://bootply.com/101543

Facebook的樣式模板： http://www.bootstrapzero.com/bootstrap-template/facebook