Twitter Bootstrap has many very interesting features available. I really liked their fixed sub navigation menus for the feature pages. As you scroll past the subnavigation, it docs with the top of the scroll window and stays there. It also enables click navigation to other feature sections.
I wanted to have the same functionality for my own html pages, so I started digging around. Looking at the page source, I saw an include for “/js/application.js”, which is included in the github source project, but is not part of the downloaded assets. At the top of the file is this nice disclaimer:
1 2 3
But I discovered that it is not JUST junk, there is a processScroll function that is just what I’m looking for:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
This wires the processScroll() function to the window scroll event and toggles the navigation element based on where it rests relative to the viewport. The idea being to add the ‘subnav-fixed’ CSS class to keep the element within the viewport.
Attached to the body tag was the first bit of markup that I needed to see:
The navigation div tags contained the rest of the information:
1 2 3 4 5 6 7
Now on my // TODO: list is to trick up the blog template to keep it’s top navigation bar fixed along the top…