$(function() { var secTopArr = new Array(); var moveFlug = false; var allHeight = $('body').outerHeight(true); var bgImg = new Array('#000','#eee', '#555', '#ccc', '#999'); $('div.section').each(function (i) { secTopArr[i] = $(this).offset().top; }); var current = -1; $(window).scroll(function () { for (var i = secTopArr.length-1; i>=0; i--) { if ($(window).scrollTop() > secTopArr[i] - 100) { chengeBG(i); break; } } }); //背景変更 function chengeBG(secNum) { if (secNum != current && moveFlug == false) { $('#bg'+current) .fadeOut(500, function(){ $(this).remove(); }); $('#wrap').append('<div id="bg'+secNum+'"></div>'); $('#bg'+secNum) .height(allHeight) .css('display','none') .fadeIn(500); current = secNum; } } $('#nav li').click(function(){ moveFlug = true; var getNum = $(this).index(); var secTop = $('.section').eq(getNum).offset().top; $('html,body').animate({ scrollTop: secTop }, 'slow', function() { moveFlug = false; chengeBG(getNum); }); return false; }); });
#wrap { padding-bottom: 10px; } #header { margin-bottom: 30px; } h1 a:hover { text-decoration: underline; } #article { width: 300px; margin: 0 auto; } div.section { background: #fff; padding: 20px; height: 1000px; margin-bottom: 20px; } #nav { z-index: 1; top: 100px; left: 20px; position: fixed; background: #fff; list-style: none; } #nav li a { text-decoration: none; width: 140px; display: block; padding: 5px; text-align: center; } #nav li a:hover { background: #E3E3E3; } #bg0, #bg1, #bg2, #bg3, #bg4 { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } #bg0 { background: #000; } #bg1 { background: #eee; } #bg2 { background: #555; } #bg3 { background: #ccc; } #bg4 { background: #999; }
<div id="wrap"> <div id="article"> <div class="section"> <h2>Section0</h2> <p>ここは0番目のコンテンツです。</p> </div> <div class="section"> <h2>Section1</h2> <p>ここは1番目のコンテンツです。</p> </div> <div class="section"> <h2>Section2</h2> <p>ここは2番目のコンテンツです。</p> </div> <div class="section"> <h2>Section3</h2> <p>ここは3番目のコンテンツです。</p> </div> <div class="section"> <h2>Section4</h2> <p>ここは4番目のコンテンツです。</p> </div> <!-- /#article --></div> <ul id="nav"> <li><a href="#s0">SECTION 0</a></li> <li><a href="#s1">SECTION 1</a></li> <li><a href="#s2">SECTION 2</a></li> <li><a href="#s3">SECTION 3</a></li> <li><a href="#s4">SECTION 4</a></li> </ul> <!-- /#wrap --></div>