Bootstrap 3 Off-Leinwand Sidebar Menu wie Facebook

Question

ich einige Beispiele von Bootstrap 3 für ein Off-Leinwand Sidebar-Menü, wenn es um Handy bekommt, die hier zu sehen ist: http://jsfiddle.net/AllenDB/9aAjJ/

Wie würde ich mich über das Erhalten das Off-Canvas-Menü, das so angepasst wurde, dass es wie Facebooks Suche/Freunde online außerhalb des Canvas-Menüs funktioniert, wo es immer am oberen Rand des Menüs beginnt und Sie nur innerhalb des Menüs scrollen können? Wie bei meinem Beispiel ist die Navigationsleiste fest eingestellt, so dass man das Seitenleistenmenü umschalten kann. Wenn Sie jedoch die aktuelle Seite durchgeblättert und das Menü gewechselt haben, müssen Sie zurückblättern, um die Links zu sehen. Ich würde gerne sehen, wie kann ich das einstellen, wo das Menü oben beginnt und schiebt den Inhalt und feste Navigationsleiste zur Seite, während in der Lage, im Menü und nicht den Inhalt zu scrollen?

Die 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 */ } 
    } 

Die 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

Wenn ich die Frage verstehen, ich glaube, Sie suchen die Sidebar Scroll unabhängig von dem Hauptinhalt zu haben. Siehe

wenn dieses Bootply Beispiel funktioniert ..

http://bootply.com/101543

Facebook-Stil-Vorlage: http://www.bootstrapzero.com/bootstrap-template/facebook