Having trouble figuring out how to make this work, despite numerous examples that don't quite fit my situation or code. I'm deeply invested in this project and can't afford to start over from scratch. I've made significant progress but can't seem to get the anchor tag in the menu to change as the user scrolls on the page.
Is there a simple solution using the latest jQuery and JavaScript that will work with my existing code?
Or am I doomed to restart the entire project?
Here is a snippet of the code I currently have:
<nav id="menu" class="menu">
<a class="menu-trigger"></a>
<ul>
<li><a href="#">:: Join Community ::</a></li>
<li><a href="#home_wrapper" class="active">Home</a></li>
<li><a href="#about_wrapper">About</a></li>
<li><a href="#advertise_wrapper">Advertise</a></li>
<li><a href="#central_wrapper">GP Central</a></li>
<li><a href="#contact_wrapper">Contact</a></li>
<li><a href="#career_wrapper">Career</a></li>
<li><a href="#press_wrapper">Press</a></li>
<li><a href="#">:: My Dashboard ::</a></li>
</ul>
</nav>
<div id="main_body">
<div id="about_wrapper">
</div>
<div class="clear"></div>
<div id="advertise_wrapper">
</div>
<div class="clear"></div>
<div id="central_wrapper">
</div>
<div class="clear"></div>
<div id="contact_wrapper">
</div>
<div class="clear"></div>
<div id="career_wrapper">
</div>
<div class="clear"></div>
<div id="press_wrapper">
</div>
</div>
I've attempted the following script:
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('.page').each(function(i) {
var posTop = $(this).position().top,
h = $(this).height();
if (posTop <= windscroll && posTop + h > windscroll ) {
$('.menu ul li').removeClass('active');
$('.menu ul li').eq(i).addClass('active');
}
});
});
Any assistance would be highly appreciated!