Highlight on Window Scroll

Highlight element on Window Scroll. No throttling in this example

by nickywaites

HTML

<div id="content1" class="content">
    
    <ul>
        <li><a href="#">Toast</a></li>
        <li><a href="#">Toast</a></li>
        <li><a href="#">Toast</a></li>
    </ul>
    
</div>
<div id="content2" class="content">
    
    <ul>
        <li><a href="#">Toast</a></li>
        <li><a href="#">Toast</a></li>
        <li><a href="#">Toast</a></li>
    </ul>
    
</div>
<div id="content3" class="content">
    <ul>
        <li><a href="#">Toast</a></li>
        <li><a href="#">Toast</a></li>
        <li><a href="#">Toast</a></li>
    </ul>
</div>

CSS

.content {
    height:500px;   
    border:1px solid black;
    width:400px;
}

.background {
    background-color:red;   
}

JavaScript

/*
hook window scroll event 



*/


$(function() {


    var p1 = $('#content1').position().top;
    var p2 = $('#content2').position().top;
    var p3 = $('#content3').position().top;

    $(window).scroll(function() {
        var scroll = $(this).scrollTop();

        if (scroll > p1 && scroll < p2) {
            $('#content1 a').addClass('background');
        } else if (scroll < p1 || scroll > p2) {
            $('#content1 a').removeClass('background');
        }

        if (scroll > p2 && scroll < p3) {
            $('#content2 a').addClass('background');
        } else if (scroll < p2 || scroll > p3) {
            $('#content2 a').removeClass('background');
        }

        if (scroll > p3) {
            $('#content3 a').addClass('background');
        } else if (scroll < p3 || scroll > p3) {
            $('#content3 a').removeClass('background');
        }

    });


});