rohitkrai03
diff --git a/‎26 - Stripe Follow Along Nav/index.html
Lines changed: 32 additions & 0 deletions b/‎26 - Stripe Follow Along Nav/index.html
Lines changed: 32 additions & 0 deletions
diff --git a/‎README.md
Lines changed: 2 additions & 0 deletions b/‎README.md
Lines changed: 2 additions & 0 deletions
@@ -214,6 +214,38 @@ <h2>Cool</h2>
 </style>
 
 <script>
+  const triggers = document.querySelectorAll('.cool > li');
+  const background  = document.querySelector('.dropdownBackground');
+  const nav  = document.querySelector('.top');
+
+  function handleEnter() {
+    this.classList.add('trigger-enter');
+    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
+    background.classList.add('open');
+
+    const dropdown = this.querySelector('.dropdown');
+    const dropdownCoords = dropdown.getBoundingClientRect();
+    const navCoords = nav.getBoundingClientRect();
+
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      top: dropdownCoords.top - navCoords.top,
+      left: dropdownCoords.left - navCoords.left
+    };
+
+    background.style.setProperty('width', `${coords.width}px`);
+    background.style.setProperty('height', `${coords.height}px`);
+    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
+  }
+
+  function handleLeave() {
+    this.classList.remove('trigger-enter', 'trigger-enter-active');
+    background.classList.remove('open');
+  }
+
+  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
 </script>
 
 </body>
 
@@ -30,3 +30,5 @@ No frameworks, no libraries, no wrappers... just pure VanillaJS ;)
 21. [x] Geolocation - [Code](./JavaScript30/21%20-%20Geolocation/index.html)
 22. [x] Follow Along Link Highlighter - [Demo](http://arkpod.in/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter/index.html)
 23. [x] Speech Synthesis - [Demo](http://arkpod.in/JavaScript30/23%20-%20Speech%20Synthesis/index.html)
+24. [x] Sticky Nav - [Demo](http://arkpod.in/JavaScript30/24%20-%20Sticky%20Nav/index.html)
+