Improve scroll indicator implementation

Now I know why it works!

package-lock.json

@@ -17,6 +17,7 @@
         "glightbox": "3.2.0",
         "htmx.org": "1.9.2",
         "lite-youtube-embed": "0.3.0",
+        "lodash.clamp": "4.0.3",
         "lodash.debounce": "4.0.8",
         "lodash.throttle": "4.1.1",
         "npm-run-all": "4.1.5",
@@ -2248,6 +2249,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.clamp": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
+      "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -5398,6 +5404,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash.clamp": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
+      "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",

package.json

@@ -36,6 +36,7 @@
     "glightbox": "3.2.0",
     "htmx.org": "1.9.2",
     "lite-youtube-embed": "0.3.0",
+    "lodash.clamp": "4.0.3",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "npm-run-all": "4.1.5",

static/src/js/base.js

@@ -89,6 +89,7 @@ window.addEventListener("load", () => {
 
 window.addEventListener("DOMContentLoaded", () => {
   setHeroHeight();
+  handleHeroStuck();
 
   if (window.location.hash <= 1) {
     return;

static/src/js/content.js

@@ -1,17 +1,33 @@
 require("lite-youtube-embed");
 const GLightbox = require("glightbox");
+const clamp = require("lodash.clamp");
 
 const SCROLL_INDICATOR = document.getElementById("scroll-indicator");
 const CONTENT = document.querySelector(".container.content");
 
-window.addEventListener("load", () => {
+function handleScrollIndicator() {
-  GLightbox({});
+  // How far down the page does the content start?
-});
+  const initialScroll = CONTENT.getBoundingClientRect().top + window.scrollY;
 
-window.addEventListener("scroll", () => {
+  const contentHeight = CONTENT.getBoundingClientRect().height;
-  const winScroll =
+
-    document.body.scrollTop || document.documentElement.scrollTop;
+  // How far down the page do we consider the content "read"?
-  const height = CONTENT.getBoundingClientRect().height;
+  const scrollTarget = window.innerHeight * 0.75;
-  const scrolled = Math.min((winScroll / height) * 100, 100);
+
-  SCROLL_INDICATOR.style.width = `${scrolled}%`;
+  const scrolled =
+    (window.scrollY - initialScroll + scrollTarget) / contentHeight;
+
+  const scrolledPercentage = clamp(scrolled * 100, 0, 100);
+
+  SCROLL_INDICATOR.style.width = `${scrolledPercentage.toFixed(2)}%`;
+}
+
+window.addEventListener("load", () => {
+  window.addEventListener("resize", handleScrollIndicator);
+  window.addEventListener("scroll", handleScrollIndicator);
+
+  GLightbox({});
+
+  // Initialize the indicator
+  handleScrollIndicator();
 });

static/src/scss/_hero.scss

@@ -130,10 +130,10 @@ section.hero {
     height: 5px;
 
     #scroll-indicator {
-      transition-duration: 0.5s;
+      transition-duration: 0.3s;
       transition-property: background-color;
       height: 100%;
-      width: 50%;
+      width: 0%;
     }
   }