Cómo colocar el porcentaje de desplazamiento en la barra de título del navegador

Un buen truco de Knut Melvær.

En última instancia, el truco se reduce a calcular hasta dónde se ha desplazado en la página y cambia el título para mostrarlo, como:

document.title = `${percent}% ${post.title}`

El truco de Knut supone React e instalar una biblioteca adicional. Estoy seguro de que esa biblioteca hace todo tipo de cosas inteligentes, pero si estás buscando hacer este estilo “vainilla”, probablemente usaría algo como esto…

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}`;});

Aquí hay un proyecto y aquí está el sitio implementado para que pueda verlo en acción.

Enlace directo →