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/embe开发者_StackOverflow中文版dded/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.

---

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.