スクロールに応じて背景を変える

Result

jQuery

var $anchors = $('section > a:first-child'),
        $zone_div = $('#the_zone'),
        $body = $('body');
    function change_bg() {
        var $win = $(window),
            $the_zone = $win.height() / 100 * 50;
        $zone_div.width($win.width()).height($the_zone);
        $anchors.each(function() {
            var anchor_pos = $(this).offset().top,
                zone_pos = $zone_div.position().top + $the_zone;
            if (anchor_pos < zone_pos) {
                //ID名をclassとして加える
                $body.removeClass().addClass(this.id);
            }
        });
    }
    change_bg();
    $(window).scroll(change_bg);

css

body { 
    background: #fff;
    font: 14px Helvetica;
    -webkit-transition: background-color .3s linear;
    -moz-transition: background-color .3s linear;
    -o-transition: background-color .3s linear;
    transition: background-color .3s linear;
    padding: 25px;
    margin: 0;
}

.blue {
    background-color: #c7e2f7;
}

.red {
    background-color: #e2af90;
}

.green {
    background-color: #a5e79d;
}

section {
    width: 100%;
    min-height: 600px;
    background: #fff;
    opacity: 0.5;
}

#the_zone {
    position: fixed;
    top: 0;
    left: 0;
}

​

html

<section>
    <a id="red">red</a>
    <h1>Section 1</h1>
</section>
<section>
    <a id="blue">blue</a>
    <h1>Section 2</h1>
</section>
<section>
    <a id="green">green</a>
    <h1>Section 3</h1>
</section>

<div id="the_zone"></div>​

via

More_fun_with_transitions-IDW