JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<section class="one">
  <div class="box"></div>
</section>
<section class="two"></section>

CSS

body {
  margin: 0;
}
.box {
  background: white;
  position: sticky;
  top: 0;
  width: 300px;
  height: 300px;
}
section.one {
  height: 1000px;
  background: blue;
}
section.two {
  height: 1000px;
  background: red;
}

JavaScript

var xPos = 0;

function getXPos(target, windowPos) {
  var amount = windowPos - target;
  xPos = amount / 10;
  return xPos;
}

$(window).scroll(function() {
  var windowPos = $(window).scrollTop();
  var sectionOne = $('section.one').offset().top;
  var sectionTwo = $('section.two').offset().top;
  var box = $('.box');

  if (windowPos > sectionOne && windowPos < sectionTwo) {
    box.css({
      "transform": 'translateX(' + getXPos(sectionOne, windowPos) + '%)'
    });
  } 

});