Merge pull request #57 from kimyvgy/fix/active-status

fix: the menu item's active status
kimyvgy · Jul 6, 2024 · 896661d · 896661d
2 parents 6d05d54 + 5c3b5c1
commit 896661d
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 119 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,9 @@
 
 [Simple scrollspy](https://kimyvgy.github.io/simple-scrollspy) is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 1.4Kb.
 
-This is a [scrollspy demo](https://kimyvgy.github.io/simple-scrollspy/demo) for my menu in the navigation bar.
+Examples:
+- [Demo 1](https://kimyvgy.github.io/simple-scrollspy/demo)
+- [Demo 2](https://kimyvgy.github.io/simple-scrollspy/demo/2.html)
 
 ## Install
 

diff --git a/demo/2.html b/demo/2.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Simple Scrollspy</title>
+    <link rel="stylesheet" href="demo.css" />
+  </head>
+  <body>
+    <div class="app">
+      <nav class="navbar">
+        <div class="container">
+          <div class="navbar-brand">
+            <h1>
+              <a href="">Simple Scrollspy</a>
+            </h1>
+          </div>
+
+          <div class="menu" id="main-menu">
+            <a class="menu-item" href="#section-1">Section 1</a>
+            <a class="menu-item" href="#section-2">Section 2</a>
+            <a class="menu-item" href="#section-3">Section 3</a>
+            <a class="menu-item" href="#section-4">Section 4</a>
+          </div>
+        </div>
+      </nav>
+
+      <section class="section" id="hero">Hero</section>
+      <section class="section scrollspy" id="section-1">Section 1</section>
+      <section class="section scrollspy" id="section-2">Section 2</section>
+      <section class="section scrollspy" id="section-3">Section 3</section>
+      <section class="section scrollspy" id="section-4">Section 4</section>
+      <section class="section" id="section-5">Section 5</section>
+
+      <footer class="footer">
+        <div class="container">
+          <p>
+            <a
+              href="https://github.com/huukimit/simple-scrollspy"
+              title="Fork me on Github"
+            >
+              Simple Scrollspy - Github
+            </a>
+          </p>
+        </div>
+      </footer>
+    </div>
+
+    <script async src="dist/simple-scrollspy.min.js"></script>
+    <script defer>
+      window.onload = function () {
+        scrollSpy("#main-menu", {
+          sectionClass: ".scrollspy",
+          menuActiveTarget: ".menu-item",
+          offset: 100,
+          // scrollContainer: null,
+          // smooth scroll
+          smoothScroll: true,
+          smoothScrollBehavior: function (element) {
+            console.log('run "smoothScrollBehavior"...', element);
+            element.scrollIntoView({ behavior: "smooth" });
+          },
+          onActive: (el) => {
+            console.log('run "onActive"...', el);
+          },
+        });
+      };
+    </script>
+  </body>
+</html>
diff --git a/demo/demo.css b/demo/demo.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   padding: 0;
   margin: 0;
   font-family: Roboto, sans-serif;
@@ -21,9 +22,9 @@ html, body {
   background: #ffffff;
   overflow: hidden;
   z-index: 1000;
-  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
-  -moz-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
+  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
 }
 
 .navbar-brand a {
@@ -81,15 +82,20 @@ html, body {
 }
 
 .section:nth-child(4) {
-  background: linear-gradient(#8e7ce4, #9783fc);
+  background: #9783fc;
 }
 
 .section:nth-child(5) {
-  background: linear-gradient(#e6b530, #f7c12d);
+  background: #e6b530;
 }
 
 .section:nth-child(6) {
-  background: linear-gradient(#407199, #457caf);
+  background: #9333ea;
+}
+
+.section:nth-child(7) {
+  background: #ffffff;
+  color: #333232;
 }
 
 .footer {

diff --git a/demo/dist/simple-scrollspy.min.js b/demo/dist/simple-scrollspy.min.js
diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,8 @@ import { ScrollSpy, type MenuElement, type Options } from './scrollspy'
 const scrollSpy = (el: MenuElement, options: Partial<Options> = {}) => {
   const instance = new ScrollSpy(el, options)
 
-  window.onload = instance.onScroll;
+  instance.onScroll()
+
   window.addEventListener('scroll', () => instance.onScroll())
 
   return instance