scrolling CSS

by Divya Manu

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    margin: auto;
}
ul li {
    width: 300px;
    height: 10px;
    background: #f5f5f5;
    float: left;
    margin: 10px;
}
ul li.middleviewport {
    background: red;
}

JavaScript

$(document).ready(function () {
        var windowHeight = $(window).height(),
            gridTop = windowHeight * .3,
            gridBottom = windowHeight * .6;
        $(window).on('scroll', function () {
            $('ul li').each(function () {
                var thisTop = $(this).offset().top - $(window).scrollTop();

                if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                    $(this).css('background', 'red');
                } else {
                    $(this).css('background', 'gray');
                }
            });
        });
    });