CODEWITHSUNDEEP
jqueryjquery-pluginsmenujquery-waypoints
Keith
Keith

Reputation: 673

Sticky Nav Bar Using jQuery Waypoints Plugin

I've created a sticky nav using the jQuery Waypoints plugin, but I am having trouble getting the nav options to always highlight when a section is chosen.

In my example you'll see that a menu item is only "active" when the section is within the range, and this changes based on the height of the viewport, which is the way Waypoints is supposed to work by default:

http://jsfiddle.net/keith/v6vuN/2/ (or fullscreen version: http://jsfiddle.net/keith/v6vuN/2/embedded/result/)

I'd like the menu items to always highlight, even if the section isn't within range.

For example, if I'm on the "Featured" section and "Contact" is visible, I'd still like the menu option to highlight even if the browser window's height can't scroll to the entire section.

Does that make sense? I'd rather not just add a lot of padding/margin between the sections or at the bottom of the page to make it longer.

Upvotes: 2

Views: 4418

Answers (1)

Matt
Matt

Reputation: 199

In this part, change:

// Register each section as a waypoint.
$('#main > .section').waypoint({ offset: '0'});

To:

// Register each section as a waypoint.
$('#main > .section').waypoint({ offset: '50%'});

0 offset is 0px from the top of the screen while 50% will make it fire at the halfway point. Adjust accordingly, but 50% should do it.

Upvotes: 2

Related Questions