کد استیکی کردن هدر با جاوا اسکریپت و css

امروزه طراحی وبسایت‌ها به‌گونه‌ای است که تجربه کاربری بهبود یابد و کاربران به راحتی به بخش‌های مختلف سایت دسترسی داشته باشند. یکی از عناصر مهم در طراحی وبسایت، منوی ناوبری است که می‌تواند به کاربران کمک کند تا به سرعت به بخش‌های مختلف سایت دسترسی پیدا کنند. یکی از روش‌های محبوب برای بهبود تجربه کاربری، استفاده از منوی استیکی است که همیشه در بالای صفحه باقی می‌ماند. در این مقاله، به نحوه‌ی استفاده از جاوااسکریپت و CSS برای ایجاد منوی استیکی که بر اساس اسکرول کاربران مخفی و ظاهر می‌شود، می‌پردازیم.

برای شروع، نیاز به دو عنصر اصلی داریم: یک منوی اصلی که به صورت ثابت در بالای صفحه قرار می‌گیرد و یک منوی استیکی که در هنگام اسکرول به پایین نمایش داده می‌شود. با استفاده از جاوااسکریپت خالص، می‌توانیم رفتار منوها را بر اساس موقعیت اسکرول تنظیم کنیم.

دمو

کد

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            background: #333;
            color: #fff;
            padding: 10px;
            transition: background 0.2s ease-in-out;
			width:100%;
        }

		.header.is-sticky {
			position: fixed;
			box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
			padding: 8px 0;
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			-webkit-animation: slideDown 0.35s ease-out;
			animation: slideDown 0.35s ease-out;
			top: 0;
			z-index: 99999;
			transition: transform 0.5s ease-in-out;
		}

		@-webkit-keyframes slideDown {
		  from {
			transform: translateY(-100%);
		  }
		  to {
			transform: translateY(0);
		  }
		}

		@keyframes slideDown {
		  from {
			transform: translateY(-100%);
		  }
		  to {
			transform: translateY(0);
		  }
		}
		main{height:2000px}
    </style>
</head>
<body>
    <header class="header">
        منوی اصلی
    </header>
    <main>
        <!-- محتوای اصلی سایت -->
        <p>محتوای سایت اینجاست...</p>
    </main>
    <script id="rendered-js">
        const header = document.querySelector(".header");
        const toggleClass = "is-sticky";
        let lastScrollY = window.pageYOffset;

        window.addEventListener("scroll", () => {
            const currentScroll = window.pageYOffset;
            if (currentScroll > lastScrollY) {
                // اسکرول به پایین
                header.classList.add(toggleClass);
            } else {
                // اسکرول به بالا
                header.classList.remove(toggleClass);
            }
            lastScrollY = currentScroll;
        });
    </script>
</body>
</html>