JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<div class="content">
  <p style="position:absolute; top: 0;">This is a paragraph.</p>
  <div class="tall">
    &nbsp;
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.content {
  padding: 0;
  margin: 0;
  position: relative;
}

.tall {
  height: 100em;
}

JavaScript

$(function() {
  $(window).scroll(function() {
    $('p').each(function(r) {
      var scrolled = $(window).scrollTop();
      console.log("Scroll Top: " + scrolled);
      if (scrolled % 10 == 0) {
        console.log("Animate: " + scrolled);
        $(this).animate({
            top: scrolled + 'px'
          },
          600,
          'easeOutExpo',
          function() {
            //
          });
      }
    });
  });
});