diff --git a/assets/css/common/header.css b/assets/css/common/header.css index 0be9644c..bd27e793 100644 --- a/assets/css/common/header.css +++ b/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; + } \ No newline at end of file diff --git a/assets/js/papermod.js b/assets/js/papermod.js index 96883de9..13437a82 100644 --- a/assets/js/papermod.js +++ b/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(); \ No newline at end of file +if (params.showCodeCopyButtons) showCodeCopyButtons(); +if (document.getElementById("toc")) openToc(); +if (document.getElementById("progressBar")) progressBar(); \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index cd2ac6aa..9901545d 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -11,6 +11,9 @@ {{- end }}
+ {{- if .IsPage }} +
+ {{- end }}