JSFiddle - React, Tailwind, and code Playground

by mtenschert

HTML

<div class="tall">
  <div class="container">
    <div class="column" data-speed="slow"></div>
    <div class="column" data-speed="fast"></div>
    <div class="column" data-speed="slow"></div>
  </div>
</div>

CSS

.container {
  position: fixed;
}
.column {
  background-color: red;
  position: relative;
  top: 0;
  height: 400px;
  width: 200px;
  margin: 10px;
  float: left;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

JavaScript

$(document).ready(function() {
  // Setup some vars on start
  // you can define more speeds here
  var speeds = {
    'slow': 0.5,
    'fast': 1
  };
  var noColumns = $('.column').length;
  // this contains column properties to be used later
  var columns = new Array();
  for (var i = 0; i < noColumns; i++) {
    columns.push({
      columnHeight: parseInt($('.column').eq(i).css('height')),
      position: 0,
      speed: speeds[$('.column').eq(i).attr('data-speed')]
    });
  }
  var previousScroll = $(this).scrollTop();
  var conHeight = parseInt($('.column').eq(0).css('height')) * 2;
  // We need to extend main div, to have scrolling bar active for all elements in column
  $('.tall').css('height', conHeight + 'px');
  $(window).on('scroll', function(event) {
    // Do the magic
    var shift = $(this).scrollTop() - previousScroll;
    previousScroll = $(this).scrollTop();
    for (var i = 0; i < noColumns; i++) {
      columns[i].position -= shift * columns[i].speed;
      $('.column').eq(i).css('top', columns[i].position + 'px');
    }
  });
});