I tried to keep the code as simple and easy as possible. At the bottom of this file, you'll find some variables you need to fill in.
var stickyel = $(".topmenu");
var sections = $(".section");
var menupos = "side";
Just replace .topmenu with the class name (or ID) of the element you want to stick to the top of the screen. Each individual item you're linking to should have the same class name. That class name should be stored in the sections variable. And finally, the menupos variable should be set to either side or top, depending on where you want it.
Once you get that set up, just link each menu item to an ID assigned to the section you want to scroll to. The rest of the magic is done for you.
I like beer. So if you get some use out of this little chunk of jQuery, you should buy me one.
This has been tested & verified to work Chrome, Firefox, IE8+, & iOS devices. If you've done additional testing or have enhancements to add to the project, please fork it on Github.
Out of the box, this little script provides:
For styling via CSS, please note that the .active class is applied to the <a> element that is highlighted, and the .highlight class is applied to the active section. The section highlighting and smooth transitions are done via CSS3 transitions.
For more information on styling, just open the CSS files and get hackin'.
This is meant to be some simple code to serve as a starter for someone looking to implement a sticky navigation with highlighted content. Please take a look at the working code to see how it all works. If you have any questions, you can email me.
This is a work in progress. I plan on adding:
© 2013 tim wasson