JSFiddle - React, Tailwind, and code Playground

by sambaldwin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<section>
  <div></div>
  <div></div>
  <div></div>
</section>
<aside>
  <div></div>
  <div></div>
  <div></div>
</aside>

CSS

* {
  box-sizing: border-box;
}

body {
  display: flex;
  height: 200vh;
}
section {
  flex-basis: 50%;
  margin-right: .5em;
}
aside {
  flex-basis: 50%;
  margin-left: .5em;
  position: relative;
}
div,
div:before,
div:after {
  height: 200px;
  width: 300px;
  background-color: #ddd;
  margin-bottom: 1em;
}
div:before,
div:after {
  content: "";
  display: block;
}

section div {
  height: 400px;
}

JavaScript

$(window).scroll(function () { 
  
  $('aside').css('top', ($(this).scrollTop()/2)+'px'); 
  
});