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 →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

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

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

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: Un buen truco de Knut

programar

es

https://pseint.es/static/images/programar-como-colocar-el-porcentaje-de-desplazamiento-en-la-barra-de-titulo-del-navegador-1478-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences