How to auto position sidenav in twitter bootstrap while sliding

Question

I have been trying to position sidenav using answers from this question. Currently I'm able to fix the menu position to the page simply by:

<div style="position: fixed" ..>
  ..
</div>

or by adding this to the corresponding css rule. It works ok but the position start right after the jumbotron subhead and stays there when I scroll. I want it not to override the jumbotron at the top of the page and move to a fixed position at the top of the page when I scroll down (just like in the documentation page except that I don't care about active highlights)

I have tried to copy the source of the documentation and added docs.css file in the page as well but it doesn't work for some reason. How can I do this?

EDIT

Here's a figure to make it clear

Answer 1

Here is something to get you started: http://jsfiddle.net/panchroma/s9XpJ/

I've used the affix behaviour which is really interesting and gives you lots of options.

The important stuff in my example is in the HTML I've specified the div I want to spy on

<div "span3" id="side-nav" data-spy="affix" data-offset-top="200">
 <!-- nav here -->
</div>

and specified the data-offset-top which is the distance you need to scroll before the div is affixed.

The class affix will be added to the div when it's affixed so in the CSS I've specified what happens then.

#side-nav.affix{
top:10px;
}

You generally need to reposition the affixed div on the page because by default bootstrap will define its position as fixed which brings it out of normal flow.

I also added some CSS using media requests to fine tune what happens as the view point narrows. The example on the Bootstrap site removes the affixed behaviour of the side-nav for the narrowest screens. I repeated that here.

Good luck!