Add a basic scroll indicator

static/src/js/content.js

@@ -1,6 +1,17 @@
 require("lite-youtube-embed");
 const GLightbox = require("glightbox");
 
+const SCROLL_INDICATOR = document.getElementById("scroll-indicator");
+const CONTENT = document.querySelector(".container.content");
+
 window.addEventListener("load", () => {
   GLightbox({});
 });
+
+window.addEventListener("scroll", () => {
+  const winScroll =
+    document.body.scrollTop || document.documentElement.scrollTop;
+  const height = CONTENT.getBoundingClientRect().height;
+  const scrolled = Math.min((winScroll / height) * 100, 100);
+  SCROLL_INDICATOR.style.width = `${scrolled}%`;
+});

static/src/scss/_hero.scss

@@ -95,6 +95,10 @@ section.hero {
     padding-bottom: unset;
   }
 
+  .columns {
+    margin-bottom: unset !important;
+  }
+
   nav.breadcrumb {
     margin-bottom: 0 !important;
   }
@@ -121,6 +125,21 @@ section.hero {
       box-shadow: $shadow;
     }
   }
+
+  .scroll-indicator-container {
+    height: 5px;
+
+    #scroll-indicator {
+      transition-duration: 0.5s;
+      transition-property: background-color;
+      height: 100%;
+      width: 50%;
+    }
+  }
+
+  &.stuck #scroll-indicator {
+    background-color: $primary;
+  }
 }
 
 #view-restriction-banner {

website/common/templates/wagtail_base.html

@@ -68,6 +68,10 @@
         </div>
       </div>
     </div>
+
+    <div class="scroll-indicator-container">
+      <div id="scroll-indicator"></div>
+    </div>
   </section>
 
   {% block pre_content %}{% endblock %}