add progressbar

assets/css/common/header.css

@@ -171,3 +171,12 @@ body:not(.dark) #sun {
 .logo-switches {
     flex-wrap: inherit;
 }
+
+#progressBar {
+    --scrollAmount: 0%;
+    width: var(--scrollAmount);
+    height: 3px;
+    background-color: rgb(0, 128, 128);
+    position: fixed;
+    z-index: 9999;
+  }

assets/js/papermod.js

@@ -107,13 +107,23 @@ function showCodeCopyButtons() {
 function openToc() {
     var toc = document.getElementById("toc");
 
-    if (toc && window.innerWidth > 1500 && window.innerHeight > 800) {
+    if (window.innerWidth > 1500 && window.innerHeight > 800) {
         toc.open = true;
     }
 }
 
+function progressBar() {
+    var bar = document.getElementById("progressBar");
+
+    document.addEventListener('scroll', () => {
+        var scrollPercent = document.documentElement.scrollTop / (document.documentElement.scrollHeight - window.innerHeight) * 100 + '%';
+        bar.style.setProperty("--scrollAmount", scrollPercent);
+    })
+}
+
 initializeMenu();
-openToc();
 if (params.scrollToTop) scrollToTop();
 if (params.themeToggle) themeToggle();
 if (params.showCodeCopyButtons) showCodeCopyButtons();
+if (document.getElementById("toc")) openToc();
+if (document.getElementById("progressBar")) progressBar();

layouts/partials/header.html

@@ -11,6 +11,9 @@
 {{- end }}
 
 <header class="header">
+    {{- if .IsPage }}
+    <div id="progressBar"></div>
+    {{- end }}
     <nav class="nav">
         <div class="logo">
             {{- $label_text := (site.Params.label.text | default site.Title) }}