using jQuery to add a class of active to navigation items when the corresponding page div is visible?

So I'm very much a jQuery noob and I don't know whether the following is possible - at least as I'm thinking of it - or how to do it.

The current setup

http://joelglovier.com

So I have a one page mini-site with a fixed navigation at the top of the screen. All (but one) of the navigation elements simply scroll the user down to the corresponding div down the page. I have that all set up just fine.

What I want to do...

I want to use jQuery to add a class of "active" to the list item anchors when they are positioned over their respective div on the page. Preferably it would not use the click function, so that even users who simply scroll down the page without clicking on the nav elements to get their would exp开发者_开发技巧erience the same thing. Similar to the phpfog home page.

I peeked at the way phpfog.com has it setup and from what I could see it's using some type of calculation with the window selector to apply the class, but A) I don't completely understand what it's doing or how to build something similar, and B) I don't know if they are doing it in the most straightforward manner.

I wrote out what I want to accomplish in a plain english statement, since I don't have a mastery on jQuery enough yet to write it out in a syntax:

If .section-link is in the window on the href value of same id, add class of "active"

So here's the code I have (HTML only, the CSS is irrelevant bc I already know how I want to style it, just want to add the active class at the appropriate place):

<div id="site-nav">

<div class="wrap">

    <ul id="nav-links">

        <li class="section-title-nav top">
            <h4><a href="#jag-home" class="section-link scroll">Home</a></h4>
        </li>

        <li class="section-title-nav skills">
            <h4><a href="#background-section" class="section-link scroll">Background</a></h4>
        </li>

        <li class="section-title-nav projects">
            <h4><a href="#projects-section" class="section-link scroll">Projects</a></h4>
        </li>

        <li class="section-title-nav blog">
            <h4><a href="http://blog.joelglovier.com" class="section-link">Blog</a></h4>
        </li>

        <li class="section-title-nav random">
            <h4><a href="#random-section" class="section-link scroll">Random</a></h4>
        </li>

        <li class="section-title-nav credits">
            <h4><a href="#credits-section" class="section-link scroll">Credits</a></h4>
        </li>

    </ul>

</div>

</div>

And further down the page, sections that are linked to in the nav are marked up about like this:

<div id="random-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Random</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">COMING SOON</h2>

</div><!--/#random-section-->

So, and tips on how to accomplish this, or whether I'm thinking about it the wrong way is what I'm looking for. Thanks!

Here's a working example I put together; I will be the first to admit it can be improved but it might give you a decent starting point to work from.

http://jsfiddle.net/nogoodatcoding/KMwhZ/1/

The basic idea is to listen for scroll events on the window and then, for each navigation link, extract the href value and check if the corresponding element is visible or not. If it is, then it's link is selected and the previously highlighted element is deselected. I'm breaking early when the first visible section is found, you can get slightly different behaviour by going all the way through the list.

My example breaks when the divs are small enough in height that multiple divs are visible when the page is scrolled all the way to the bottom - in the case, the links for the lowest few divs will never get hightlighted. But that appears to be the case even with the phpfog page you linked to - the links for Testimonials and Free Tools never get activated because my display is tall enough to show the last 3 sections when scrolled all the way down. Note that this won't be the case if don't break early - there, the last visible section will be highlighted. But you can then see the opposite problem - the top section's link is never activated since something else is always visible.

<script type="text/javascript">
    jQuery(document).ready(function($) {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
    $("#navbar li a").each(function() {//alert('dsfgsdgfd');
    if(urlRegExp.test(this.href.replace(/\/$/,''))){
    $(this).addClass("active");}
});`enter code here`
}); 
</script>