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

Leave a Reply

Your email address will not be published. Required fields are marked *