position: fixed; でおしゃれな背景を演出する

sectionを通過するたびに背景色を変更していくモックをつくってみました。
ウィンドウのリサイズには対応していないので、読み込み時のウィンドウサイズのままご利用ください。

JavaScript

(function(win, doc, $) {

    "use strict";
    
    var $win  = $(win),
        $bg   = $("#bg"),
        $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,
        top   = 0;
    
    $win.on("scroll", function() {
        top = $win.scrollTop();
        
        if (top >= s5Top) {
            $bg[0].className = "s5";
        }
        
        else if (top >= s4Top) {
            $bg[0].className = "s4";
        }
        
        else if (top >= s3Top) {
            $bg[0].className = "s3";
        }
        
        else if (top >= s2Top) {
            $bg[0].className = "s2";
        }
        
        else if (top >= s1Top) {
            $bg[0].className = "s1";
        }
        
        else {
            $bg[0].className = "";
        }
    });
    
})(this, document, $);

HTML

<div id="bg" class=""></div>

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

CSS

html, body {
  height: 100%; }

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px; }
  #header .inner {
    width: 100%;
    overflow: hidden; }
    #header .inner .list {
      float: left;
      width: 20%;
      height: 20px; }
      #header .inner .list.l1 {
        background: #dc5252; }
      #header .inner .list.l2 {
        background: #8f65c3; }
      #header .inner .list.l3 {
        background: #65b9c3; }
      #header .inner .list.l4 {
        background: #83c287; }
      #header .inner .list.l5 {
        background: #dbe286; }

#bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #333;
  z-index: -1;
  transition: background 0.5s ease; }
  #bg.s1 {
    background: #dc5252; }
  #bg.s2 {
    background: #8f65c3; }
  #bg.s3 {
    background: #65b9c3; }
  #bg.s4 {
    background: #83c287; }
  #bg.s5 {
    background: #dbe286; }

.section {
  margin: 100% auto;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5); }
  .section .inner {
    margin: 10px; }
    .section .inner .ttl {
      font: 40px HelveticaNeue-UltraLight;
      letter-spacing: .2em; }