https://lei-qian.com/assets/js/progress-bar.js?v=499464c5c63ced6cf7ad62509f1e2610

1/*
2 * This JavaScript code has been adapted from the article
3 * https://css-tricks.com/reading-position-indicator/ authored by Pankaj Parashar,
4 * published on the website https://css-tricks.com on the 7th of May, 2014.
5 * Couple of changes were made to the original code to make it compatible
6 * with the `al-folio` theme.
7 *
8 * v1.0 migration note:
9 * Keep behavior equivalent to the previous jQuery implementation, but with
10 * a dependency-free runtime so it works when jQuery is not loaded.
11 */
12
13const progressBar = document.getElementById("progress");
14
15window.addEventListener("load", () => {
16  setTimeout(progressBarSetup, 50);
17});
18
19function progressBarSetup() {
20  if (!progressBar) return;
21
22  if ("max" in document.createElement("progress")) {
23    initializeProgressElement();
24    document.addEventListener("scroll", () => {
25      progressBar.value = getCurrentScrollPosition();
26    });
27    window.addEventListener("resize", initializeProgressElement);
28  } else {
29    resizeProgressBar();
30    document.addEventListener("scroll", resizeProgressBar);
31    window.addEventListener("resize", resizeProgressBar);
32  }
33}
34
35function getCurrentScrollPosition() {
36  return window.pageYOffset || document.documentElement.scrollTop || 0;
37}
38
39function getElementOuterHeightWithMargins(element) {
40  if (!element) return 0;
41  const styles = window.getComputedStyle(element);
42  const marginTop = parseFloat(styles.marginTop) || 0;
43  const marginBottom = parseFloat(styles.marginBottom) || 0;
44  return element.getBoundingClientRect().height + marginTop + marginBottom;
45}
46
47function initializeProgressElement() {
48  const navbar = document.getElementById("navbar");
49  const navbarHeight = Math.round(getElementOuterHeightWithMargins(navbar));
50
51  document.body.style.paddingTop = `${navbarHeight}px`;
52  progressBar.style.top = `${navbarHeight}px`;
53  progressBar.max = getDistanceToScroll();
54  progressBar.value = getCurrentScrollPosition();
55}
56
57function getDistanceToScroll() {
58  return Math.max(document.documentElement.scrollHeight - window.innerHeight, 0);
59}
60
61function resizeProgressBar() {
62  progressBar.style.width = `${getWidthPercentage()}%`;
63}
64
65function getWidthPercentage() {
66  const distanceToScroll = getDistanceToScroll();
67  if (distanceToScroll === 0) return 0;
68  return (getCurrentScrollPosition() / distanceToScroll) * 100;
69}