Fix lingering active class

Modified behavior of getSectionInView(), onScroll(), and removeCurrentActive() to remove active class on first menu item when that item corresponds to a section below other content
kimyvgy · Jun 26, 2024 · b0efc4f · b0efc4f
1 parent 6d05d54
commit b0efc4f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/demo/dist/simple-scrollspy.min.js b/demo/dist/simple-scrollspy.min.js
diff --git a/src/scrollspy.ts b/src/scrollspy.ts
@@ -91,6 +91,8 @@ export class ScrollSpy {
           this.removeCurrentActive({ ignore: menuItem })
           this.setActive(menuItem)
         }
+      } else {
+        this.removeCurrentActive({ ignore: null })
       }
     }
 
@@ -125,7 +127,10 @@ export class ScrollSpy {
         }
 
         const isInView = currentPosition > startAt && currentPosition <= endAt
-        if (isInView) return this.sections[i]
+        if (isInView) {
+          if (!startAt) return false
+          return this.sections[i]
+        }
       }
     }
 
@@ -139,10 +144,10 @@ export class ScrollSpy {
       }
     }
 
-    removeCurrentActive({ ignore }: { ignore: HTMLElement }) {
+    removeCurrentActive({ ignore }: { ignore: HTMLElement | null }) {
       if (this.menuList) {
         const { hrefAttribute, menuActiveTarget, activeClass } = this.options
-        const items = `${menuActiveTarget}.${activeClass}:not([${hrefAttribute}="${ignore.getAttribute(hrefAttribute)}"])`
+        const items = ignore ? `${menuActiveTarget}.${activeClass}:not([${hrefAttribute}="${ignore.getAttribute(hrefAttribute)}"])` : `${menuActiveTarget}.${activeClass}`
         const menuItems = this.menuList.querySelectorAll(items)
 
         menuItems.forEach((item) => item.classList.remove(this.options.activeClass))