• 0

Question

Posted · Report post

Hello, 

 

I would like to have a scrolling sidebar or fixed sidebar - referred to by Bootstrap as n affixed sidebar. See an example here: http://getbootstrap.com/javascript (Sidebar is on the left and it scrolls with the content).

 

So I figure since there are options for fixed navbar and scrollspy, that there should be a way to make the sidebar scroll-able. 

 

Does adding the .fix or .fix-top to the <div> class make sense? I've tried some examples with zero results. An example code I attemped is the following: 

 

It would be great to gain some insight.

 

Thanks ahead!

 

Mike

 

Example code for Affix Sidebar:

<header> 
<div class="well"> 
  <h1>Header</h1>
</div>
</header>

<div class="container">
<div class="row">
  <div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav affix-top" data-spy="affix" data-offset-top="100">
      <li class="header"><h3>Sidebar</h3></li>
      <li class="active"><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
      <li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
      <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
      <li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
      <li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
    </ul>
  </div>
  <div class="span9">
    <h1>Main</h1>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    
    <br>
    
    Eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
  
   <br>
    
    Qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
  
    <br>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    
  </div>
</div>
</div>

Share this post


Link to post
Share on other sites

2 answers to this question

  • 0

Posted · Report post

And I figured it out. All you have to do is add some custom CSS (position: fixed;) to the "Custom CSS" in DMS as follows:

 

ul.sidebar_widgets {
position: fixed;
}
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now