Highlight Anchor Links when user manually scrolls? [duplicate]

Question

I apologize for the long post. I wanted to include everything that might be helpful.

I have a single page website that consists of several divs stacked vertically. I'm using a floating nav bar and softscroll.js to make anchor links move to the divs when clicked.

I'm a front end designer, but through this website and hours of trial/error and googling I've been able to get all elements working. (Auto resize div height when window resize, highlight clicked anchor link, scroll etc.)

I've got it set up so that clicking an anchor link changes it's class to "active". That works beautifully. But I want to trigger the same thing if the user manually scrolls to the div as well.

I've looked at the code used in this post as I've seen it a couple of times. But it replaces some of the codes I've already got working and still doesn't highlight.

Here is the code I'm using for the active anchor:

// JS for highlight selected button
$(function() {
    $("a").click(function() {
      // remove classes from all
      $("a").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

And I'm using this one to resize the divs based on window size. Not sure if it is relevant, but here:

// JS for Div Height Auto Resize 
$(document).ready(function(){
  resizeDiv();
});

window.onresize = function(event) {
  resizeDiv();
}

function resizeDiv() {
  vpw = $(window).width();
  vph = $(window).height();
  $('.layoutblock').css({'height': vph + 'px'});
}

This is the menu HTML:

<div id="navigation">
<ul>
<li><a href="#composition" ><img src="images/icons/compicon.png" alt="composition" width="32" height="36" border="0" align="middle" />Composition</a></li>
<li><a href="#creative"><img src="images/icons/designicon.png" alt="Large Format" width="36" height="33" border="0" align="middle" /> Creative</a></li>
[...]
</ul>
</div>

...and the menu CSS:

  #navigation {
    background-color: #F60;
    position: fixed;
    height: 100%;
    width: 60px;
     -moz-transition:width .5s;
    -webkit-transition:width .5s;
    -o-transition:width .5s;
    transition:width .5s;
    overflow: hidden;
    left: 0px;
    top: 0px;
    z-index: 99;
    padding-top: 30px;
    margin-left: 0px;
}

#navigation:hover {
    margin-left: 0px;
    width: 190px;
}

#navigation li {
    list-style: none;
    margin-left: -40px;

}

#navigation img {
    padding-left: 5px;
    padding-right: 20px;
}
#navigation li a {
    font-family: "Proxima N W01 Smbd", Arial, Helvetica;
    font-size: 14px;
    display: block;
    color: white;
    font-weight:bold;
    text-decoration: none;
    text-transform:uppercase;
    line-height:26px;
    padding-left:5px;
    padding-right: 5px;
    padding-top: 10px;
    height: 50px;
    white-space: nowrap;
}

a.active{
    background-color: #333;
}

Finally, here is the URL for the test page: [redacted for security now that site is launched]

Answer 1

Well, I found my answer here: Change Active Menu Item on Page Scroll? which lead to a fiddle that worked like a charm.

I ended up using code to watch for the anchor tags and change the menu based on those. It even included soft scrolling and on-click highlights, so I was able to get rid of the other snippets I was using.

Also important to note: I had a heck of a time getting it to work on my site even though it worked in the fiddle. Turns out I needed to put the snippet at the end of the body so that everything would be loaded before it registered the anchors. Just a tip if anyone else experiences the same issue.