Sticky Menus with Waypoints.js

Sometimes navigation can be significantly improved by including context aware menus.  Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.  On the North Star website, I used waypoints.js to add a menu that allows you to filter the class schedule:

Class Schedule Menu

The content for each day’s classes is contained in togglable tabs using the Bootstrap javascript component.

Initializing the sticky behavior is as simple as this:

$('#classes').waypoint( 'sticky', {
offset: 64
});

which attaches the class ‘stuck’ to the #classes list element when scrolls to 64 pixels from the top of the browser window.  Some CSS such as this fixes the menu so it doesn’t continue to scroll:

.stuck {
position: fixed;
top: 64px;
}

I wanted the menu to be accessible on mobile devices as well and added some code to scroll to the top of the tabbed content when a menu item is selected:

$('#classes a').click(function(event) {
$('html, body').animate({scrollTop: $('.tab-content').offset().top - 115}, 300);
});

You can see it live here or another similar example on the HealthLoop website where patients and physicians can find out more about how HealthLoop can benefit them.

HealthLoop Waypoints