<div class="bg" id="1">
  <div class="cloud" id="1"></div>
</div>
<div class="bg" id="2">
  <div class="cloud" id=></div>
</div>
<div class="bg" id="3">
  <div class="cloud" id="3"></div>
</div>

<div class="filler">
  <!-- Bars -->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="header">
  <div class="button" id="home">
    <div class="button-text">please</div>
  </div>
  <div class="button" id="about">
    <div class="button-text">scroll</div>
  </div>
  <div class="button" id="contact">
    <div class="button-text">down</div>
  </div>
  <div class="header-shadow"></div>
</div>

<div class="footer">
  <div class="footer-text">end.</div>
</div>
* {
  box-sizing: border-box;
}

body {
  margin: auto;
  font-family: "Lucida Sans Unicode";
}

.filler {
  background-color: Teal;
  width: 100%;
  height: 3000px;
}

.filler > div {
  height: 200px;
  width: 70%;
  background-color: CadetBlue;
  margin: auto;
  margin-bottom: 165px;
}

.filler > div:last-child {
  margin-bottom: 0;
}

.bg {
  position: fixed;
  opacity: 0.8;
  height: 3000px;
  width: 1000px;
  left: 50%;
  margin-left: -500px;
}

.bg[id="1"] {
  z-index: 1;
  //border: 1px solid LightGrey;
}

.bg[id="2"] {
  z-index: 2;
  //border: 2px solid DimGrey;
}

.bg[id="3"] {
  z-index: 3;
  //border: 3px solid Black;
}

.cloud {
  position: absolute;
  height: 250px;
  width: 500px;
}

.bg[id="1"] .cloud {
  background-color: Black;
  left: 250px;
  top: 500px;
  height: 250px;
  width: 30%;
}

.bg[id="2"] .cloud {
  background-color: DimGrey;
  left: 300px;
  top: 800px;
  height: 300px;
  width: 40%;
}

.bg[id="3"] .cloud {
  background-color: LightGrey;
  left: 350px;
  top: 1100px;
  height: 350px;
  width: 50%;
}

.header {
  width: 100%;
  height: 80px;
  z-index: 4;
  position: fixed;
  top: 100vh;
  margin-top: -80px;
}

.header-shadow {
  position: relative;
  top: 10px;
  background-color: black;
  opacity: 0.7;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.header .button {
  width: 33.33%;
  height: 100%;
  display: inline;
  float: left;
  text-align: center;
  background-color: LimeGreen;
}

.button .button-text {
  color: white;
  display: inline;
  position: absolute;
  top: 40px;
  margin-top: -0.5em;
}

.button:hover {
  background-color: LightGreen;
  cursor: pointer;
}

.footer {
  height: 80px;
  width: 100%;
  background-color: LimeGreen;
  text-align: center;
  color: White;
}

.footer .footer-text {
  position: relative;
  top: 40px;
  margin-top: -0.5em;
}
$(document).ready(function() {

  var $header = $(".header");

  $(window).bind('scroll', function(e) {
    parallaxScroll();
    var scrollAmt = $(window).scrollTop();
    if (scrollAmt > $(window).height() - $header.height()) {
      fixHeaderToTop();
    } else {
      letHeaderScroll();
    }
  });

  var letHeaderScroll = function() {
    $header.css('position', 'absolute');
    $header.css('top', $(window).height() + 'px');
    $header.css('margin-top', '-80px');
  }

  var fixHeaderToTop = function() {
    $header.css('position', 'fixed');
    $header.css('top', '0');
    $header.css('margin-top', '0');
  }

  /*
  Parallax scroll function taken from Jonathan Nicol @ http://jonathannicol.com/blog/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/
  */
  function parallaxScroll() {
    var scrolled = $(window).scrollTop();
    $('.bg[id="1"]').css('top', (0 - (scrolled * .25)) + 'px');
    $('.bg[id="2"]').css('top', (0 - (scrolled * .5)) + 'px');
    $('.bg[id="3"]').css('top', (0 - (scrolled * .75)) + 'px');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js