مخفی شدن هدر در اسکرول به پایین و نمایش هدر در اسکرول به بالا

مخفی شدن هدر در اسکرول به پایین و نمایش آن در اسکرول به بالا

سلام! حتماً در سایت‌های مختلف دیده‌اید که هنگام اسکرول به پایین، هدر چسبان سایت به‌طور خودکار مخفی می‌شود و وقتی به سمت بالا اسکرول می‌کنید، دوباره ظاهر می‌شود. این ویژگی یکی از ترفندهای حرفه‌ای در طراحی وب است که هم تجربه کاربری (UX) را بهبود می‌بخشد و هم به کاربر اجازه می‌دهد تمرکز بیشتری روی محتوای اصلی داشته باشد.

در این آموزش، من امیررضا رحمانی به شما نشان می‌دهم که چگونه این افکت را به‌سادگی با استفاده از jQuery و CSS پیاده‌سازی کنید.

چرا این قابلیت مهم است؟

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

برای استفاده از این قابلیت، فقط کافیه کد زیر رو کپی کنی:

کپی


<!-- amirrezarahmani.ir -->
<script>

    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($) {
    var mywindow = $(window);
    var mypos = mywindow.scrollTop();
    let scrolling = false; /* For throlling scroll event */
    window.addEventListener('scroll', function() {
    scrolling = true;
    });
    setInterval(() => {
    if (scrolling) {
    scrolling = false;
    if (mypos > 40) {
    if (mywindow.scrollTop() > mypos) {
    $('#stickyheaders').addClass('headerup');
    } else {
    $('#stickyheaders').removeClass('headerup');
    }
    }
    mypos = mywindow.scrollTop();
    }
    }, 300);
    });
    });
    
    </script>
    <style>
    #stickyheaders{
    transition : transform 0.34s ease;
    }
    .headerup{
    transform: translateY(-110px); /*adjust this value to the height of your header*/
    }
    </style>

آموزش موشکافانه

توضیح مفصل کدهای استفاده‌شده و نحوه کارکرد آن‌ها:

HTML و CSS

ابتدا، هدر سایت را با آی‌دی #stickyheaders در نظر می‌گیریم و برای آن یک انیمیشن مخفی شدن تعریف می‌کنیم:

Copy Code


#stickyheaders {
    transition: transform 0.34s ease;
}
.headerup {
    transform: translateY(-110px); /* ارتفاعی که هدر باید مخفی شود */
}

✅ چه اتفاقی می‌افتد؟

با استفاده از transition تغییر موقعیت هدر را نرم و روان کرده‌ایم.
کلاس .headerup باعث می‌شود هدر به سمت بالا حرکت کرده و از دید کاربر خارج شود.

جاوا اسکریپت (با jQuery)

برای مخفی و نمایش دادن هدر هنگام اسکرول، از اسکریپت زیر استفاده می‌کنیم:

Copy Code


document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($) {
        var mywindow = $(window);
        var mypos = mywindow.scrollTop();
        let scrolling = false; // برای جلوگیری از اجرای مداوم تابع در هنگام اسکرول

        window.addEventListener('scroll', function() {
            scrolling = true;
        });

        setInterval(() => {
            if (scrolling) {
                scrolling = false;
                if (mypos > 40) { // فقط وقتی اسکرول بیشتر از 40 پیکسل باشد اجرا شود
                    if (mywindow.scrollTop() > mypos) {
                        $('#stickyheaders').addClass('headerup'); // مخفی کردن هدر
                    } else {
                        $('#stickyheaders').removeClass('headerup'); // نمایش مجدد هدر
                    }
                }
                mypos = mywindow.scrollTop();
            }
        }, 300); // کنترل اجرای تابع هر 300 میلی‌ثانیه (کاهش مصرف منابع)
    });
});

✅ چه اتفاقی می‌افتد؟

مقدار موقعیت فعلی اسکرول (mypos) را ذخیره می‌کنیم.
یک لیسنر (scroll event) اضافه می‌کنیم تا متوجه تغییرات اسکرول شویم.
در فواصل 300 میلی‌ثانیه بررسی می‌کنیم که آیا کاربر به سمت بالا اسکرول کرده است یا پایین.
اگر اسکرول رو به پایین بود، کلاس .headerup اضافه شده و هدر مخفی می‌شود.
اگر اسکرول رو به بالا بود، کلاس .headerup حذف شده و هدر نمایش داده می‌شود.

نتیجه نهایی

با این روش، هدر سایت شما مانند سایت‌های مدرن و حرفه‌ای، هنگام اسکرول به پایین ناپدید شده و در اسکرول به بالا، مجدداً ظاهر خواهد شد.

💡 اگر می‌خواهید سورس کد کامل این آموزش را دریافت کنید، می‌توانید آن را از کانال من دانلود کنید.

امیدوارم این آموزش برای شما مفید باشد! 🚀