Scroll Percentage in the Browser Title Bar
Knut Melvær shares a trick for displaying scroll progress in the page title. The approach comes down to determining how far down the page you have scrolled and writing that value into the title:
document.title = `${percent}% ${post.title}`Knut's version assumes React and pulls in an extra library. That library presumably handles more than this simple case, but a "vanilla" version can be written without it:
const percentLabel = document.querySelector("#percent");
const originalTitle = document.title;
window.addEventListener("scroll", () => {
let scrollTop = window.scrollY;
let docHeight = document.body.offsetHeight;
let winHeight = window.innerHeight;
let scrollPercent = scrollTop / (docHeight - winHeight);
let scrollPercentRounded = Math.round(scrollPercent * 100);
percentLabel.innerHTML = scrollPercentRounded;
document.title = `(${scrollPercentRounded}%) ${originalTitle}`;
});Chris Coyier has published a project and a deployed site where the effect can be seen in action.
