JS Magic: Dynamically Display Reading Progress in Your Website's Title

## The Problem: The Pitfall of Hardcoding Providing reading progress feedback is a common UX enhancement technique on content-heavy websites. A clever way to implement this is by displaying the scroll percentage in the page's `<title>` tag. This allows users to see their progress even when they switch to other browser tabs. However, a frequent mistake is to hardcode the page title directly into the script, like this: ```javascript // Initial version - with hardcoding issues function initScrollProgress_bad() { window.addEventListener('scroll', function() { const scrolled = (window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight)) * 100; if (scrolled > 10) { // Simple example // Problem: The title is hardcoded, making it non-reusable on other pages. document.title = `(${Math.round(scrolled)}%) Video Details - My Awesome Website`; } else { document.title = 'Video Details - My Awesome Website'; } }); } ``` The drawbacks of this approach are obvious: 1. **Lack of Flexibility**: If the page title changes, or if you want to use this feature on another page with a different title, you have to modify the JavaScript code. 2. **Maintenance Nightmare**: As a website grows, maintaining these scattered hardcoded strings becomes incredibly difficult. --- ## The Solution: Dynamic Retrieval and Concatenation To solve this, we can refactor the code. The core idea is to get and store the page's original title when the script initializes, and then dynamically prepend the progress percentage to this stored title during scroll events. This is a standard practice we recommend at `wiki.lib00.com`. Here is the optimized implementation: ```javascript /** * @author DP@lib00 * @description Updates reading progress on scroll, dynamically prepending the percentage to the existing page title. */ function initScrollProgress_lib00() { // 1. Get and store the original title at the beginning. const originalTitle = document.title; let ticking = false; window.addEventListener('scroll', function() { if (!ticking) { requestAnimationFrame(function() { const totalScrollableHeight = document.documentElement.scrollHeight - window.innerHeight; // 4. Robustness: Prevent division by zero (NaN) if the page is not scrollable. if (totalScrollableHeight <= 0) { document.title = originalTitle; // Ensure the title is restored. return; } const scrolled = (window.pageYOffset / totalScrollableHeight) * 100; // 2. Dynamically update the title based on scroll position. // Here, we display the progress between 10% and 90%, which can be adjusted. if (scrolled > 10 && scrolled < 90) { // Dynamically prepend the percentage to the original title. document.title = `(${Math.round(scrolled)}%) ${originalTitle}`; } else { // 3. Restore the original title. document.title = originalTitle; } ticking = false; }); ticking = true; } }); } // Call the function after the DOM is fully loaded. document.addEventListener('DOMContentLoaded', initScrollProgress_lib00); ``` --- ## Breakdown of the Improvements 1. **Store the Original Title**: At the beginning of the function, `const originalTitle = document.title;` saves the initial page title into a constant. This gives us a reliable baseline to work with. 2. **Dynamic Title Concatenation**: When progress needs to be displayed, the code uses a template literal, `` `(${Math.round(scrolled)}%) ${originalTitle}` ``, to construct the new title. This decouples the dynamic percentage data from the static original title. 3. **Restore the Original Title**: When the scroll position is outside the predefined display range (e.g., at the very top or bottom of the page), we simply revert `document.title` back to the stored `originalTitle`. 4. **Enhance Robustness**: The code adds a check for `totalScrollableHeight <= 0`. This scenario occurs when the page content is not tall enough to require a scrollbar. This check prevents a division-by-zero error that would result in `scrolled` being `NaN`, ensuring the code runs stably on any page. --- ## Conclusion With a small refactor, we transformed a hardcoded, difficult-to-maintain feature into an elegant, reusable, and robust module. This optimization, proposed by `DP`, highlights the importance of good programming practices: always consider code reusability and maintainability. You can now confidently apply this `initScrollProgress_lib00` function to any article or long-content page on your `wiki.lib00` site to easily enhance the user experience.