Fixed, dynamic sidebar navigation menu?

Question

My site is built on Roots/Bootstrap/WordPress, and I'm sure there's a lot of similar things to what I'm looking for but I'm interested in specific examples of how to implement this. I'm not even sure where to begin.

I'm looking to create a physically fixed sidebar navigation menu that is basically an outline of the page - first level are the H1's, second level are the H2's and so on.

Similarly to what GetBootstrap.com does for their sidebar navigation. As the user scrolls through the page, different items get highlighted in the sidebar navigation.

Answer 1

This is, in fact, a component of the Bootstrap.js library.

http://getbootstrap.com/javascript/#affix

Answer 2

You can use position: fixed property. This css below fix #menu at the same position on screen no matter how you scroll.

#menu{
        width:10px;
        height:10px;
        position: fixed;
        left: 50px;
        top: 50px;
        background-color: red;
    }