[javascript] Highlight Anchor Links when user manually scrolls?

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]

This question is related to javascript jquery

The answer is


You can use Jquery's on method and listen for the scroll event.