以前 、position: fixed をつかっておしゃれな背景を演出しましたが、よく考えたら、背景色を変えるだけなら position: fixed を使わなくても良かったということに気づきました。
position: fixed; でおしゃれな背景を演出する - みかづきブログ その3
DEMO
HTML
<header id="header"> <ul class="inner"> <li class="list l1"></li> <li class="list l2"></li> <li class="list l3"></li> <li class="list l4"></li> <li class="list l5"></li> </ul> </header> <section id="section1" class="section s1"> <div class="inner"> <h1 class="ttl">SECTION 1</h1> </div> </section> <section id="section2" class="section s2"> <div class="inner"> <h1 class="ttl">SECTION 2</h1> </div> </section> <section id="section3" class="section s3"> <div class="inner"> <h1 class="ttl">SECTION 3</h1> </div> </section> <section id="section4" class="section s4"> <div class="inner"> <h1 class="ttl">SECTION 4</h1> </div> </section> <section id="section5" class="section s5"> <div class="inner"> <h1 class="ttl">SECTION 5</h1> </div> </section>
SCSS
@import "compass/reset"; html { height: 100%; } body { height: 100%; background: #333; transition: background .5s ease; &.s1 { background: #dc5252; } &.s2 { background: #8f65c3; } &.s3 { background: #65b9c3; } &.s4 { background: #83c287; } &.s5 { background: #dbe286; } } #header { position: fixed; top: 0; left: 0; width: 100%; height: 20px; .inner { width: 100%; overflow: hidden; .list { float: left; width: 20%; height: 20px; &.l1 { background: #dc5252; } &.l2 { background: #8f65c3; } &.l3 { background: #65b9c3; } &.l4 { background: #83c287; } &.l5 { background: #dbe286; } } } } .section { margin: 100% auto; width: 100%; height: 100%; background: rgba(255, 255, 255, .5); .inner { margin: 10px; .ttl { font: 40px HelveticaNeue-UltraLight; letter-spacing: .2em; } } }
JavaScript
(function(win, doc, $) { "use strict"; var $win = $(win), $s1 = $("#section1"), $s2 = $("#section2"), $s3 = $("#section3"), $s4 = $("#section4"), $s5 = $("#section5"), s1Top = $s1.offset().top | 0, s2Top = $s2.offset().top | 0, s3Top = $s3.offset().top | 0, s4Top = $s4.offset().top | 0, s5Top = $s5.offset().top | 0, body = doc.body, top = 0; $win.on("scroll", function() { top = $win.scrollTop(); if (top >= s5Top) { body.className = "s5"; } else if (top >= s4Top) { body.className = "s4"; } else if (top >= s3Top) { body.className = "s3"; } else if (top >= s2Top) { body.className = "s2"; } else if (top >= s1Top) { body.className = "s1"; } else { body.className = ""; } }); })(this, document, $);
ちょいとばかし解説
前回はposition: fixedの要素を1つ敷いて、その要素の背景を変更していましたが、今回はbodyの色を変更するように改修しました。これでposition: fixedの効かないAndroid端末とかでも同じような見栄えになるはずです。