Skip to content

Instantly share code, notes, and snippets.

@crazy4groovy

crazy4groovy/percentage-titlebar.js

Created April 1, 2023 07:27
Show Gist options
  • Save crazy4groovy/14ec9242f51bc296f274d0d4eb6fb513 to your computer and use it in GitHub Desktop.
Save crazy4groovy/14ec9242f51bc296f274d0d4eb6fb513 to your computer and use it in GitHub Desktop.
Download ZIP
Put the Scroll Percentage in the Browser Title Bar Dynamically (JavaScript)
Raw
percentage-titlebar.js
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}`;
});
@crazy4groovy
Copy link
Author

credit: https://css-tricks.com/how-i-put-the-scroll-percentage-in-the-browser-title-bar/

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