One page nav on and off states based on scrollTop

$(window).scroll(function() { scrollTop = $(window).scrollTop(); //This calculation can be done once instead of being recalculated for each section. $(".section").each(function() { elemTop = $(this).offset().top; elemBottom = elemTop + $(this).outerHeight(); //You already calculated elemTop, might as well reuse it here. id = $(this).children().attr("id"); if (scrollTop >= elemTop && scrollTop <= elemBottom) { $("#nav-bar .current").removeClass("current"); //Find all of the elements with the class of current and remove the class current; $("#nav-bar a[href=#" + id + "]").find('span').addClass("current"); } }); });