JSFiddle - React, Tailwind, and code Playground

by LADYX

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:800px;"></div>
<div class="left" data-tr="margin-left" data-val="300"></div>
<p></p>
<div class="left" data-tr="margin-left" data-val="300"></div>
<p></p>
<div class="right" data-tr="margin-right" data-val="300"></div>
<p></p>
<div class="right" data-tr="margin-right" data-val="300"></div>
<div style="height:800px;"></div>

CSS

p {
  height:250px;
}
.left {
  display: block;
  float: left;
  margin: 0;
  height: 50px;
  width: 50px;
  background:blue;
}
.right {
  display: block;
  float: right;
  margin: 0;
  height: 50px;
  width: 50px;
  background:green;
}

JavaScript

$(function() {

var $win = $(window),
    $rev = $('[data-tr]'),
    winH2 = 0,
    winSt = 0;

function reveal() {

  winSt = $win.scrollTop();
  winH2 = $win.height()/2;

  $rev.each(function(i, el){
    var y = el.getBoundingClientRect().top,
        toMiddleMax = Math.max(0, y-winH2),
        idealMarg   = Math.min(+el.dataset.val, toMiddleMax),
        margMin     = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2));
    $(this).css({[el.dataset.tr]: margMin +"px"});
  });

}
$win.on({
  "load resize scroll" : reveal
});

});