Highlighting nav items with scroll (#1064)

* Basic nav highlighting * Nav is now hidden on mobile again * Fixed conflicting smooth scrolling settings * Added transparency transition * Adjusted transition target * Adjusted transition target * Added a comment * Update sass/main.scss Co-authored-by: Peter Kos <[email protected]> * Restored old nav structure, adjusted scrolling * Searchbar no longer shows ID, fixed border unaligning nav items * Remove hover on click * Cleaned up CSS, added comment * Removed newline * Update package-lock.json * Update package-lock.json * Target navbar links instead of login button Co-authored-by: Peter Kos <[email protected]>
codeRIT · Jan 5, 2021 · a7bad44 · a7bad44
1 parent 36f3255
commit a7bad44
Show file tree

Hide file tree

Showing 5 changed files with 1,699 additions and 999 deletions.
diff --git a/index.html b/index.html
@@ -26,13 +26,13 @@
 </head>
 <body>
     <nav>
-        <div class="left">
+        <div class="left navbar-items">
             <a id="logo" href="https://brickhack.io">
                 <img src="assets/logo.svg" alt="BrickHack 7 Logo" />
             </a>
-            <a class="link" href="#hackathon-content">GENERAL</a>
-            <a class="link" href="#faq">FAQ</a>
+            <a class="link" href="#hackathon">GENERAL</a>
             <a class="link" href="#schedule">SCHEDULE</a>
+            <a class="link" href="#faq">FAQ</a>
             <a class="link" href="#leadership">ABOUT US</a>
         </div>
         <div class="right">

diff --git a/index.js b/index.js
@@ -16,6 +16,20 @@ const comment = document.createComment("\n"+hiringMessage.toString()+"\n");
 document.insertBefore(comment, document.firstChild);
 
 
+// Nav highlighting on scroll
+import ActiveMenuLink from "active-menu-link";
+
+let options = {
+    itemTag: "",
+    scrollOffset: -90, // nav height
+    scrollDuration: 1000,
+    ease: "out-quart",
+    showHash: false,
+};
+
+new ActiveMenuLink(".navbar-items", options);
+
+
 // Random hero SVG on each page load
 import desk1 from './assets/desk1.svg'
 import desk2 from './assets/desk2.svg'