Skip to content

Instantly share code, notes, and snippets.

@drzhbe
Last active December 19, 2017 05:00
Show Gist options
  • Save drzhbe/db8b2a54b80ec07a43ab to your computer and use it in GitHub Desktop.
Save drzhbe/db8b2a54b80ec07a43ab to your computer and use it in GitHub Desktop.
Show reading progress on scroll
(function() {
var willHide = false;
var msgBox = document.createElement('div');
msgBox.style.position = 'fixed';
msgBox.style.top = '10px';
msgBox.style.right = '10px';
msgBox.style.display = 'none';
document.body.appendChild(msgBox);
window.addEventListener('scroll', function() {
var percentLeft = (window.scrollY / (document.body.scrollHeight - window.innerHeight) * 100).toPrecision(3) + '%';
if (msgBox.style.display === 'none') {
msgBox.style.display = 'block';
}
msgBox.innerText = percentLeft;
if (!willHide) {
willHide = true;
setTimeout(function() {
msgBox.style.display = 'none';
willHide = false;
}, 1000);
}
});
})();
@drzhbe
Copy link
Author

drzhbe commented Jan 31, 2015

how it looks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment