Progress bar of how far you have scrolled

progress-bar.js

(function ($, Drupal, drupalSettings) {

  Drupal.behaviors.progressBar = {
    attach: function (context) {

      //add a listener for scroll
      $(window).scroll(() => {

        if (document.querySelector('.js-progress-bar').length) {
          const ProgressText = document.querySelector('.progress-bar__text');

          //get article's height
          let docHeight = $("article").height();

          //get window height
          let winHeight = $(window).height();

          //calculate the view port
          let viewport = docHeight - winHeight;

          //get current scroll position
          let scrollPos = $(window).scrollTop();

          //get current scroll percent
          let scrollPercent = (scrollPos / viewport) * 100;

          //add the percent to the top progress bar
          $(".progress-bar").css("width", scrollPercent + "%");

          //add the screenreader text to the progressbar
          ProgressText.innerHTML = Math.round(scrollPercent) + "% of article is read"
        }

      });


    }
  };


})(jQuery, Drupal, drupalSettings);

progress-bar.scss

 .article__progress-bar-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    height: 4px;
    z-index: 15;

    .progress-bar {
      width: 0;
      height: 100%;
      background-color: var(--inspiration-orange);
    }
  }

progress-bar.twig

 <div class="article__progress-bar-wrapper">
      <div class="progress-bar"></div>
      <p class="progress-bar__text sr-only"></p>
    </div>