如何引導

Question

如何固定側nav當我向下滾動here

<div class="page-container"> 
<!-- top navbar --> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project Name</a> 
    </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row row-offcanvas row-offcanvas-left"> 

    <!-- sidebar --> 
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li>    
     </ul> 
    </div> 

    <!-- main area --> 
    <div class="col-xs-12 col-sm-9"> 
     <div id="scroller" style="background-color: gray; height: 800px"> 

     </div> 


    </div> 
</div> 

Answer 1

只需添加position:fixed到.nav將作爲您的預期修復側佈局。

.nav{ 
    position:fixed; 
} 

Working bootply

Answer 2

試試這個

.main-area { 
float:right; 
} 
#sidebar { 
position:fixed; 
top: 80px; 
left: 0; 
} 

http://www.bootply.com/ikpeHyvGZM