A lightweight, performance-optimized, and beautiful Sticky Header Navigation Menu built using native Vanilla JavaScript and CSS3. It dynamically transitions into a fixed top header layout as soon as the user scrolls past the threshold, utilizing modern frosted-glass effects.
You can test the live version of this project here:
👉 Launch Live Demo
- Performance Optimized: Threshold coordinates are computed outside the window scroll scope to minimize browser layout redraws (Reflows).
- Anti-Snap Flow Architecture: Prevents the sudden layout jumping glitch common in basic fixed position scripts.
- Modern Glassmorphism Design: Polished with native backdrop filters, light-mode transparencies, and smooth micro-interactions.
- Pure JavaScript: Zero external dependencies or jQuery overhead.
- Highly Scalable: Can easily be retrofitted into any existing CMS, custom theme, or dashboard structure.
یک منوی ناوبری چسبان (Sticky Navbar) هوشمند، سبک و بسیار بهینه که با استفاده از جاوا اسکریپت خالص (Vanilla JS) و معماری تعاملی CSS3 پیادهسازی شده است. این پروژه به محض اسکرول کاربر و عبور از مرز هدر، منو را با افکتی شیک و شیشهای به بالای صفحه میچسباند.
برای مشاهده و تست آنلاین این پروژه میتوانید روی لینک زیر کلیک کنید:
👉 مشاهده دمو زنده پروژه
- بهینهسازی شده برای پرفورمنس: محاسبات مختصات خارج از حلقه اصلی اسکرول انجام میشود تا از درگیر کردن بیهوده سیپییو مرورگر جلوگیری شود.
- جلوگیری از پرش صفحه (Anti-Snap): رفع باگ پرش ناگهانی المانهای پایینی بعد از فیکس شدن منو در بالای صفحه.
- ظاهر گلسمورفیسم لایت: استفاده از افکت شیشهای مجهز به متدهای ماتسازی پسزمینه و هماهنگ با فونتهای مدرن وب فارسی.
- جاوا اسکریپت خالص: بدون استفاده از فریمورکها یا وابستگیهای سنگین جانبی.
- ادغامپذیری آسان: قابلیت اعمال سریع روی تمام قالبهای مدیریت، صفحات فرود و سیستمهای مدیریت محتوا.
- HTML5 & CSS3 (Backdrop-filter blur properties, smooth transitions, flex layouts)
- Pure Vanilla JavaScript (Optimized scroll window listeners, native classList state management)
👨💻 Developer: Amin Arjmand
🌐 Website: aminarjmand.com
⭐️ *If you found this dashboard layout useful, please give this repository a star!
⭐️ *اگر این مخزن برای شما مفید بود، لطفا با دادن ستاره از آن حمایت کنید!