JSFiddle - React, Tailwind, and code Playground

by zedsaid

HTML

<section class="main-content">
  <p>
      <img src="http://www.puc.edu/__data/assets/image/0015/114081/i-dccTLGQ-XL.jpg" />
  </p>
</section>
<nav></nav>

CSS

* {
    margin: 0;
    padding: 0;
  }
  body {
    background: #222;
  }
  .main-content, nav, nav::before {
    position: absolute;
    width: 640px;
  }
  body > .main-content, nav {
    left: -webkit-calc(50% - 320px);
    top: -webkit-calc(50% - 160px);
  }
  body > .main-content {
    overflow: auto;
  }
  .main-content {
    height: 320px;
  }
  nav, nav::before {
    height: 170px;
  }
  nav {
    margin-top: 250px;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,.2);
  }
  nav::before {
    content: "";
    z-index: 1;
    background: rgba(255,255,255,.5);
  }
  nav .main-content {
    top: -250px;
    -webkit-filter: blur(4px);
  }

JavaScript

var content = document.querySelector(".main-content")
    , clone = content.cloneNode(true)

  document.querySelector("nav").appendChild(clone)

  content.addEventListener("scroll", function() {
    clone.style.webkitTransform = "translate3d(0, -" + content.scrollTop + "px,0)"
  })