World's Easiest Sticky Menu

with highlighted links as you scroll & stuff

How to use this little chunk of jQuery.

View the Project on GitHub

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.

Top and side demo

Click the buttons below to see the menu on either the top or side of the content. The code for each menu is stored in the demo-left.css or demo-right.css style sheets.

Top MenuSide Menu

Buy me a beer.

I like beer. So if you get some use out of this little chunk of jQuery, you should buy me one.

More information & help

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.

Coming Soon

This is a work in progress. I plan on adding:

© 2013 tim wasson