Skip to content

Instantly share code, notes, and snippets.

@ankedsgn
Last active September 7, 2022 09:53
Show Gist options
  • Save ankedsgn/9805b9e523eb3b5c0397dda3343304c5 to your computer and use it in GitHub Desktop.
Save ankedsgn/9805b9e523eb3b5c0397dda3343304c5 to your computer and use it in GitHub Desktop.
Progress bar of how far you have scrolled
(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);
.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);
}
}
<div class="article__progress-bar-wrapper">
<div class="progress-bar"></div>
<p class="progress-bar__text sr-only"></p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment