JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<div class="progress">
  <div class="bar"></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet sit amet mi vel egestas. Nam nec elit commodo, facilisis orci non, finibus massa. Proin quis neque sed tellus molestie mattis. Aenean erat lectus, blandit at sagittis vitae, dictum id tortor. Maecenas vehicula diam at dolor euismod, vel luctus metus mattis. Vivamus nisl nisl, vulputate id elit a, vestibulum tristique metus. Sed pellentesque elit in bibendum condimentum. Aliquam pulvinar arcu at orci consectetur, at tempus est elementum. Integer id eros a erat aliquam faucibus. Integer elementum sagittis dui. Sed placerat vestibulum nunc vel facilisis. Fusce ac nunc ex.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam commodo vulputate fermentum. Morbi sapien nisl, sodales quis lobortis vel, eleifend nec tellus. Pellentesque ut eros mauris. Maecenas vulputate vestibulum sem. Curabitur volutpat sem sapien, ut lacinia neque porta vel. Donec ut rutrum augue, sed pulvinar magna.

Duis cursus tortor turpis, non consectetur risus finibus et. Proin dignissim sit amet ex id sagittis. Suspendisse pulvinar magna nec ornare mattis. Donec ac nisi faucibus, interdum ipsum sed, varius ligula. Suspendisse euismod facilisis fermentum. Etiam non luctus orci. Duis vel odio sapien. Maecenas tempor sem pellentesque, viverra nisl quis, placerat magna. Maecenas sed nunc sem. Proin vel ligula in neque rutrum lobortis ut nec dui.

Integer mauris nunc, commodo vitae lorem varius, sollicitudin porta mi. Proin sed lorem elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla orci magna, laoreet quis quam a, rutrum rutrum dui. Phasellus at fermentum purus, non fermentum arcu. Morbi nec dolor id dolor vestibulum lobortis. Nunc dictum eros sit amet interdum maximus. Maecenas eu urna at nulla dictum porta. Fusce rutrum felis in risus sagittis laoreet ut vel nunc. Sed...

CSS

.progress {
  position: fixed;
  top:  0;
  left: 0;
  width: 100%;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #7fdbff;
}

JavaScript

$(document).on('scroll', function() {
  var pixelsFromTop = $(document).scrollTop()

  if (pixelsFromTop < 600) {
    $('section').css('background-color', '#fff0f0')
  } else if (pixelsFromTop < 1200) {
    $('section').css('background-color', '#F8D800')
  } else if (pixelsFromTop < 1600) {
    $('section').css('background-color', '#F6FFFF') 
  } else {
    $('section').css('background-color', '#cdccc7')
  }

  var documentHeight = $(document).height()
  var windowHeight = $(window).height()
  var difference = documentHeight - windowHeight
  var percentage = 100 * pixelsFromTop / difference

  $('.bar').css('width', percentage + '%')

})