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> |
