Using the navstrap navigation bar

Question

I implemented bootstrap if you switched: http://twitter.github.com/bootstrap/javascript.html#affix

Im tyring to apply the affix to the left panel, where when I scroll down, the side panel remains with a scroll. I can't get this to work. I tried everything. Any ideas or tricks I need to do to get this to work?

I tried a data item and javascript, none of them work. I also have bootstrap.js, bootstrap.cs and bootstrap-responsive.cs.

<div class="container"> <!-- Docs nav ================================================== --> <div class="row"> <div class="span3 bs-docs-sidebar" data-spy="affix" data-offset-top="200" > <ul class="nav nav-list bs-docs-sidenav"> <li><a href="#AccountId"><i class="icon-chevron-right"></i>My Account</a></li> <li><a href="#tutorialid"><i class="icon-chevron-right"></i>My Tutorials</a></li> <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i>My Articles</a></li> <li><a href="#navs"><i class="icon-chevron-right"></i>Help</a></li> </ul> </div> <div class="span9"> <!-- Typography ================================================== --> <section id="AccountId"> <div class="page-header"> <h1>My Account</h1> </div> <div class="bs-docs-example"> <h3><b>Change Password</b></h3> <div> <label>Current Password</label> <input type="text" /> <label>New Password</label> <input type="text" /> <label>Confirm Password</label> <input type="text" /> <br /> <input type="button" class="btn btn-primary" value="Submit" /> </div> <h3><b>Tutorial Settings</b></h3> <div> <label>Current Password</label> <input type="text" /> <label>New Password</label> <input type="text" /> <label>Confirm Password</label> <input type="text" /> <br /> <input type="button" class="btn btn-primary" value="Submit" /> </div> <h3><b>Article Settings</b></h3> <div> <label>Current Password</label> <input type="text" /> <label>New Password</label> <input type="text" /> <label>Confirm Password</label> <input type="text" /> <br /> <input type="button" class="btn btn-primary" value="Submit" /> </div> </div> </section>@* Tutorials *@ <section id="tutorialid"> <div class="page-header"> <h1>My Tutorials</h1> </div> <div class="bs-docs-example"></div> </section> </div> </div> </div> 

Answer 1

This does not work because you add the affix to the div while you have to add it to ul .

If you check the source code of the Twitter Bootstrap Javascript page, how they do it.

I tried to do this with your code and it works :)

Answer 2

Go to application.js, line 19.

This will allow you to make a custom add-on for sidenav to stop in the appropriate place that you want too.