update scrollY

Author: surjithctly

examples/components/navbar.astro

@@ -6,9 +6,15 @@ import {
   Dropdown,
   DropdownItems,
   DropdownSubmenu,
+  StickyHeader
 } from "astro-navbar";
 ---
 
+<StickyHeader
+  class="sticky top-0 border-b z-20 transition-all"
+  scrollY={40}
+  defaultClass="py-5 border-transparent"
+  activeClass="py-2 bg-white/80 border-gray-200 backdrop-blur-lg">
 <header class="lg:flex justify-between p-5 gap-5 mx-auto container">
   <Astronav closeOnClick>
     <div class="flex w-full lg:w-auto justify-between">
@@ -217,3 +223,4 @@ import {
     </MenuItems>
   </Astronav>
 </header>
+</StickyHeader>

examples/pages/index.astro

@@ -6,4 +6,5 @@ import Layout from "./layout.astro";
 <Layout>
   <Navbar />
   <h1 class="text-center font-medium text-2xl mt-16">Astro Nav Demo</h1>
+  <div class="m-40 mt-72 bg-pink-50" style="height: 1500px;"></div>
 </Layout>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-navbar",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Responsive Mobile Navigation with Dropdown in Astro",
   "type": "module",
   "exports": "./index.ts",

src/components/StickyHeader.astro

@@ -34,7 +34,7 @@ function OnScroll(scrollPos) {
       header.setAttribute("active", "");
     }
     //reduce the scrollY to avoid flickering when scrolling up
-    if (scrollPos < Math.max(scrollY - 20, 0)) {
+    if (scrollPos < Math.max(scrollY - 40, 10)) {
       header.classList.remove("is-active", ...classArray);
       header.classList.add(...replaceArray);
       header.removeAttribute("active");