Created
February 9, 2021 05:20
-
-
Save w3collective/4dc78c59aed0d36e067d906aa8d5729b to your computer and use it in GitHub Desktop.
Reading progress indicator (on scroll) in JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Create a reading progress indicator (on scroll) in JavaScript</title> | |
| <style> | |
| #progress-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 0; | |
| height: 4px; | |
| z-index: 99; | |
| background-color: #b22222; | |
| transition: width 1s; | |
| } | |
| article { | |
| width: 640px; | |
| margin: auto; | |
| font-family: sans-serif; | |
| line-height: 1.4; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="progress-bar"></div> | |
| <article> | |
| <h1>Lorem ipsum dolor sit amet</h1> | |
| <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p> | |
| <p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p> | |
| <p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p> | |
| <p>Eget dolor morbi non arcu risus. Hendrerit dolor lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p> | |
| <h3>Mattis aliquam faucibus purus</h3> | |
| <p>Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p> | |
| <p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p> | |
| <p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p> | |
| <p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p> | |
| <h3>Sit amet nulla facilisi</h3> | |
| <p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p> | |
| <p>Eget dolor morbi non arcu risus. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p> | |
| <p>Mattis aliquam faucibus purus in. Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p> | |
| <p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p> | |
| <p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p> | |
| <h3>Mattis aliquam faucibus purus</h3> | |
| <p>Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p> | |
| <p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p> | |
| <p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p> | |
| <p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p> | |
| <h3>Sit amet nulla facilisi</h3> | |
| <p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p> | |
| <p>Eget dolor morbi non arcu risus. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p> | |
| <p>Mattis aliquam faucibus purus in. Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p> | |
| <p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p> | |
| <p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p> | |
| <h3>Mattis aliquam faucibus purus</h3> | |
| <p>Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p> | |
| <p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p> | |
| <p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p> | |
| <p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p> | |
| <h3>Sit amet nulla facilisi</h3> | |
| <p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p> | |
| <p>Eget dolor morbi non arcu risus. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p> | |
| <p>Mattis aliquam faucibus purus in. Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p> | |
| <p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p> | |
| <p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p> | |
| </article> | |
| <script> | |
| const progressBar = document.getElementById("progress-bar"); | |
| const setProgressBar = () => { | |
| let scrollDist = document.documentElement.scrollTop || document.body.scrollTop; | |
| let progressWidth = (scrollDist / (document.body.scrollHeight - document.documentElement.clientHeight)) * 100; | |
| progressBar.style.width = progressWidth + "%"; | |
| }; | |
| if (progressBar) { | |
| window.addEventListener("scroll", setProgressBar); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Ok, I see it's an issue with how Webnode applies z-indexing to elements within the page.
The progress bar is working it's just covered by the header.
If the progress bar div is inserted dynamically it resolves the issue, try updating the script as follows:
<script>
div = document.createElement("div");
div.id = "progress-bar";
document.body.appendChild(div);
const progressBar = document.getElementById("progress-bar");
const setProgressBar = () => {
let scrollDist = document.documentElement.scrollTop || document.body.scrollTop;
let progressWidth = (scrollDist / (document.body.scrollHeight - document.documentElement.clientHeight)) * 100;
progressBar.style.width = progressWidth + "%";
};
if (progressBar) {
window.addEventListener("scroll", setProgressBar);
}
</script>
Oh, right! Thanks; indeed it is covered by header.
The script you've just pasted above did not fix it for me;
however I've moved the bar from top: 0 to bottom: 0 within the style settings,
this way it is always visible independently of the device being used for viewing it.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Latest android (10 QKQ1.190825.002 / MIUI 12.0.4) & version of each browser, checked on: Brave (1.2486); Chrome (91.0.4472.88) and Mi Browser (V12.10.8-gn) as well.
Java is enabled within the browsers yet this reading progress indicator is not showing up on phone.
I've found another solution with svg/jquery script that worked - interestingly again not the one with bar, but chart with percentages #just the positions were a bit off there.
Initially I've copied only the functional parts:
<div id="progress-bar"></div>to HTML part;CSS stuff to
<style>...</style>and JS within
<script>...</script>section to the bottom of the page.Now just for test purpose I've copied the whole your HTML code above to my domain @webnode and checked again on my phone;
it still does not work.
https://devnullproxy.webnode.com/ipsum-rpi/
Tried with another android device as well - most likely the issue has something to do with Webnode...; just can't figure out what is the matter.