Hilight a menu item when scrolling past the #id anchor using jQuery. A.k.a. ScrollSpy.

hilight_menuitem.js

// The menu should have the id #menu
// ID's that have to work with this should have the class .scroll-anchor

function highlightMenuItem(anchor) {
	var menu_item = $('#menu a[href="#/'+anchor+'"]');
	if (menu_item && !menu_item.hasClass('active')) {
		$('#menu .active').removeClass('active');
		menu_item.addClass('active');
	}
}

$(document).scroll(function() {
	var viewport_top = $(document).scrollTop();
	var viewport_bot = $(document).scrollTop()+$(window).height();
	var top_element = false;
	
	$('.scroll-anchor').each(function() {
		if ($(this).css('display') !== 'none') {
			var element_top = $(this).position().top;
			if (element_top >= viewport_top && element_top < viewport_bot && (!top_element || top_element.position().top > element_top)) {
				top_element = $(this);
				return false;
			}
		}
	});
	if (top_element) {
		var anchor = top_element.attr('id');
		highlightMenuItem(anchor);
	}
});