position: fixed; を使わずにおしゃれな背景を演出する

以前 、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端末とかでも同じような見栄えになるはずです。