Extract Scroll Indicator controller

assets/controllers/scroll_indicator_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  updateWidth() {
+    const referenceHeight = document.body.offsetHeight - window.innerHeight;
+    const scrollPercent = (window.scrollY / referenceHeight) * 100;
+
+    this.element.style.width = `${scrollPercent}%`;
+  }
+}

assets/index.js

@@ -242,22 +242,8 @@ const stickyNav = () => {
   });
 };
 
-const articleScroll = () => {
-  const articleEl = $('#article');
-  if (articleEl.length > 0) {
-    $(window).scroll(() => {
-      const s = $(window).scrollTop();
-      const d = $(document).height();
-      const c = $(window).height();
-      const scrollPercent = (s / (d - c)) * 100;
-      $('.progress .determinate').css('width', `${scrollPercent}%`);
-    });
-  }
-};
-
 $(document).ready(() => {
   stickyNav();
-  articleScroll();
   initPreviewText();
 
   const toggleNav = (toShow, toFocus) => {

templates/Entry/entry.html.twig

@@ -8,7 +8,7 @@
 
 {% block menu %}
     <div class="progress">
-        <div class="determinate"></div>
+        <div class="determinate" data-controller="scroll-indicator" data-action="scroll@window->scroll-indicator#updateWidth"></div>
     </div>
     <nav class="hide-on-large-only js-entry-nav-top">
         <div class="nav-panel-item cyan darken-1">