Question

I have a one page website that uses jQuery.ScrollTo with a layout like this:

<ul>
<li><a href="#section1" id="item01">Menu Item 1</a></li>
<li><a href="#section2" id="item02">Menu Item 2</a></li>
<li><a href="#section3" id="item03">Menu Item 3</a></li>
<li><a href="#section4" id="item04">Menu Item 4</a></li>
</ul>

<div id="section1">
...content...
</div>
<div id="section2">
...content...
</div>
<div id="section3">
...content...
</div>
<div id="section4">
...content...
</div>

The behavior I want to reach is that when I scroll to a certain div without clicking the links in the menu the class of the anchor related to that div to change.

Is this possible using the jQuery.scrollTo script ?

Answer 1

I don’t believe scrollTo has that built in. But another plugin called Waypoints would give you that functionality.

It would end up looking like this:

$('.thing').waypoint(function(direction) {
  alert('Top of thing hit top of viewport.');
});