JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<body>
  <div class="header"></div>
  <div class="block">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Curabitur
    aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Sed porttitor lectus nibh.
    Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia
    in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Vivamus magna justo,
    lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas
    non nisi. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis
    a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Curabitur...

CSS

body {
  background-image: url('https://subtlepatterns.com/patterns/crissXcross.png');
  margin: 0px;
  padding: 0px;
}

.block {
  width: 200px;
  background: #dedede;
  position: fixed;
  top: 0px;
  padding: 20px;
  font-size: 20px;
}

#fakeHeight {
  height: 6000px;
  width: 1px;
}

.header {
  height: 200px;
  background: blue;
}

#scrollPercentLabel {
  font-family: Impact;
  font-size: 50px;
  color: #2B2B2B;
  background: rgba(255, 255, 255, 0.5);
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
}

JavaScript

$(document).ready(function() {
  repositionLabel();
  $(window).scroll(function(e) {
    var scrollTop = $(window).scrollTop();
    var docHeight = $(document).height();
    var winHeight = $(window).height();
    var scrollPercent = (scrollTop) / (docHeight - winHeight);
    var scrollPercentRounded = Math.round(scrollPercent * 100);
    var blockHeight = $(".block").height();
    var ratio = (scrollPercent * (blockHeight - winHeight));

    $(".block").css('top', '-' + ratio + 'px');




    $('#scrollPercentLabel>span').html(scrollPercentRounded);
    repositionLabel();
  });

  $(window).resize(function() {
    repositionLabel();
  });

  function repositionLabel() {
    $('#scrollPercentLabel').css({
      position: 'fixed',
      left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
      top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
    });
  }

  repositionLabel();

});