<div class="parallax-container">
    <div class="parallax-layer layer-0" data-parallax-speed="0.05" data-max-scroll="465"></div>
    <div class="parallax-layer layer-1" data-parallax-speed="0.1" data-max-scroll="465"></div>
    <div class="parallax-layer layer-2" data-parallax-speed="0.3" data-max-scroll="465"></div>
    <div class="parallax-layer layer-3" data-parallax-speed="0.5" data-max-scroll="465"></div>
    <div class="parallax-layer layer-4" data-parallax-speed="0.7" data-max-scroll="465"></div>
    <div class="parallax-layer layer-5" data-parallax-speed="0.9" data-max-scroll="465"></div>
  </div>

  <div class="content">
    <div id="a8" class=""><h1>This is parallax.</h1></div>
  </div>

body {
  background: #415a6c;
  margin: 0;
  font-family: 'Oswald';
}
.parallax-container {
  position: fixed;
  overflow: visible;
  width: 100%;
  height: 850px;
}
.parallax-layer {
  width: 100%;
  height: 500px;
  position: fixed;
  left: 0;
  top: 0;
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: 960px 253px;
}
  .layer-0 {
    top: 0;
    z-index: 5;
    background: #dbf0ff url('https://i.imgur.com/4hwp8up.png') no-repeat top 40px center;
    background-size: 120px 138.5px;
  }
  .layer-1 {
    top: -100px;
    z-index: 5;
    background-image: url('https://i.imgur.com/Ra2bzmb.png');
  }
  .layer-2 {
    top: -50px;
    z-index: 10;
    background-image: url('https://i.imgur.com/jSOo9SK.png');
  }
  .layer-3 {
    top: -10px;
    z-index: 15;
    background-image: url('https://i.imgur.com/DOZRBDj.png');
  }
  .layer-4 {
    top: 65px;
    z-index: 20;
    background-image: url('https://i.imgur.com/JbSR9JY.png');
  }
  .layer-5 {
    top: 150px;
    z-index: 25;
    background-image: url('https://i.imgur.com/Ti2mNxd.png');
  }

  
.content {
  position: absolute;
  top: 600px;
  background: #415a6c;
  width: 100%;
  min-height: 1500px;
}
  .content h1 {
    color: #fff;
    font-size: 2em;
    text-transform: uppercase;
    text-align: center;
  }

.stick {
    position: fixed;
    top: 0;
}

var ParallaxManager, ParallaxPart;

ParallaxPart = (function() {
  function ParallaxPart(el) {
    this.el = el;
    this.speed = parseFloat(this.el.getAttribute('data-parallax-speed'));
    this.maxScroll = parseInt(this.el.getAttribute('data-max-scroll'));
  }

  ParallaxPart.prototype.update = function(scrollY) {
    if (scrollY > this.maxScroll) { return; }
    var offset = -(scrollY * this.speed);
    this.setYTransform(offset);
  };

  ParallaxPart.prototype.setYTransform = function(val) {
    this.el.style.webkitTransform = "translate3d(0, " + val + "px, 0)";
    this.el.style.MozTransform    = "translate3d(0, " + val + "px, 0)";
    this.el.style.OTransform      = "translate3d(0, " + val + "px, 0)";
    this.el.style.transform       = "translate3d(0, " + val + "px, 0)";
    this.el.style.msTransform     = "translateY(" + val + "px)";
  };

  return ParallaxPart;

})();

ParallaxManager = (function() {
  ParallaxManager.prototype.parts = [];

  function ParallaxManager(elements) {
    if (typeof elements === 'array' && elements.length) {
      this.elements = elements;
    }
    if (typeof elements === 'object' && elements.item) {
      this.elements = Array.prototype.slice.call(elements);
    } else if (typeof elements === 'string') {
      this.elements = document.querySelectorAll(elements);
      if (this.elements.length === 0) {
        throw new Error("Parallax: No elements found");
      }
      this.elements = Array.prototype.slice.call(this.elements);
    } else {
      throw new Error("Parallax: Element variable is not a querySelector string, Array, or NodeList");
    }
    for (var i in this.elements) {
      this.parts.push(new ParallaxPart(this.elements[i]));
    }
    window.addEventListener("scroll", this.onScroll.bind(this));
  }

  ParallaxManager.prototype.onScroll = function() {
    window.requestAnimationFrame(this.scrollHandler.bind(this));
  };

  ParallaxManager.prototype.scrollHandler = function() {
    var scrollY = Math.max(window.pageYOffset, 0);
    for (var i in this.parts) { this.parts[i].update(scrollY); }
  };

  return ParallaxManager;

})();

new ParallaxManager('.parallax-layer');
//
var top = document.getElementById('a8').offsetTop;

window.onscroll = function() {
    var y = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    if (y >= top) {
        a8.className = 'stick';
    }
    else {
        a8.className = '';
    }
};