FA-TOOLS — Header Component
DIRECT LINE 09202232789
چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟

چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟

⭐ نقشه راه: ساخت هدر هوشمند در یک نگاه ⭐

چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟ — تصویر 1

💡 مرحله ۱: HTML پایه

ساختار اصلی هدر و محتوای صفحه رو می‌چنیم.

  • <header> و <nav>
  • محتوای کافی برای اسکرول

💡 مرحله ۲: CSS چسبنده

هدر رو با CSS چسبنده می‌کنیم و استایل می‌دیم.

💡 مرحله ۳: JavaScript هوشمند

منطق نمایش/مخفی‌سازی هدر رو با JS پیاده می‌کنیم.

  • ردیابی جهت اسکرول
  • اضافه/حذف کلاس‌های CSS

💡 مرحله ۴: بهینه‌سازی و نکات

بهبود تجربه کاربری و حل مشکلات رایج.

  • رسپانسیو بودن
  • عملکرد و دسترسی‌پذیری
  • رفع اشکال

رفیق برنامه‌نویس، تا حالا شده توی یه سایت بچرخی و ببینی هدرش موقع اسکرول به پایین غیب میشه و فقط وقتی به بالا اسکرول می‌کنی دوباره ظاهر میشه؟ این قابلیت نه تنها خفن به نظر میرسه، بلکه تجربه کاربری (UX) رو هم حسابی ارتقا میده. به این میگن “هدر چسبنده هوشمند” (Sticky Header). امروز می‌خوام مرحله به مرحله با هم بسازیمش، از پایه تا پیشرفته. آماده‌ای؟ بزن بریم!
ضمناً، اگه دنبال ابزارهای خفن و کدهای آماده‌ای که کارت رو راه بندازه، یه سر به فروشگاه ابزارهای ما بزن. شاید همون چیزی که دنبالشی اونجا باشه!

چرا هدر چسبنده هوشمند، اصلاً چی هست و چرا لازمه؟

چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟ — تصویر 2

خب، قبل از اینکه دست به کد بشیم، بیاید ببینیم این هدر چیه و چرا باید هوشمندش کنیم. هدر چسبنده یا Sticky Header همون نوار بالای سایتته که وقتی اسکرول می‌کنی، همیشه بالا ثابت می‌مونه. مزیتش اینه که کاربر هر جا باشه، همیشه به منوها و بخش‌های اصلی سایت دسترسی داره.

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

مزایای هدر هوشمند:

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

شروع کار: HTML، CSS و JavaScript، سه یار جدا نشدنی

برای ساخت هدر هوشمندمون، به مثلث طلایی توسعه وب نیاز داریم: HTML برای ساختار، CSS برای زیبایی و چسبندگی اولیه، و JavaScript برای هوشمندی.

مرحله ۱: ساختار HTML (فونداسیون کار)

اول از همه، یه فایل index.html بساز و کدهای زیر رو توش کپی کن. این فونداسیون هدر و محتوای اصلی صفحه‌مونه. دقت کن که برای تست، به محتوای کافی نیاز داریم تا صفحه قابل اسکرول باشه.

index.html
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>هدر چسبنده هوشمند</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header id="smartHeader" class="main-header">
        <div class="container">
            <div class="logo">
                <a href="https://fa-tools.ir/">
                    <span style="color: #1ABC9C; font-weight: bold;">FA</span><span style="color: #34495E;">Tools</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#home">خانه</a></li>
                    <li><a href="#about">درباره ما</a></li>
                    <li><a href="https://fa-tools.ir/shop/">محصولات</a></li>
                    <li><a href="#services">خدمات</a></li>
                    <li><a href="https://fa-tools.ir/contact/">تماس با ما</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main-content">
        <section id="hero" style="background-color: #e0f2f7; padding: 100px 20px; text-align: center; min-height: 600px; display: flex; flex-direction: column; justify-content: center;">
            <h1 style="color: #2C3E50; font-size: 2.8em; margin-bottom: 20px;">به دنیای ابزارهای توسعه خوش آمدید!</h1>
            <p style="color: #555; font-size: 1.3em; line-height: 1.6;">
                اینجا جاییه که می‌تونی دانش و ابزارهاتو ارتقا بدی.
            </p>
            <button style="background-color: #1ABC9C; color: white; padding: 15px 30px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; margin-top: 30px;">
                شروع کن
            </button>
        </section>

        <section id="about" style="background-color: #f8f9fa; padding: 80px 20px; min-height: 800px;">
            <div class="container">
                <h2 style="color: #34495E; font-size: 2em; margin-bottom: 30px; text-align: center;">درباره ما</h2>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    اینجا در FA<span style="color: #1ABC9C; font-weight: bold;">Tools</span>، باور داریم که دسترسی به منابع با کیفیت و ابزارهای مناسب، کلید موفقیت هر توسعه‌دهنده‌ایه. ما تلاش می‌کنیم تا با ارائه محتوای آموزشی درجه یک و معرفی بهترین ابزارها، مسیر یادگیری و پیشرفت شما رو هموار کنیم.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    مهم نیست تازه‌کارید یا یه حرفه‌ای کارکشته؛ همیشه چیزی برای یادگیری و کشف کردن وجود داره. از کدهای آماده و اسنیپت‌های کاربردی گرفته تا مقالات عمیق و پروژه‌های واقعی، ما کنارتون هستیم.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    با هدف حل مشکلات واقعی توسعه‌دهندگان، تیم ما دائماً در حال به‌روزرسانی محتوا و ابزارهاییه که می‌تونن سرعت و کیفیت کارتون رو چند برابر کنن. کافیه یه تماس بگیری یا از طریق بخش تماس با ما با تیم فنی در ارتباط باشی.
                </p>
                <!-- تکرار پاراگراف‌ها برای افزایش طول صفحه -->
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    بیشتر از شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای و ابزارهای کاربردی می باشد. در این مسیر، همراهی شما بزرگترین افتخار ماست.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    هدف اصلی ما در FA<span style="color: #1ABC9C; font-weight: bold;">Tools</span>، ایجاد یک اکوسیستم جامع برای توسعه‌دهندگان وب فارسیه. از آموزش‌های مقدماتی گرفته تا تکنیک‌های پیشرفته سئو و بهینه‌سازی عملکرد، همه چیز رو اینجا پیدا خواهید کرد.
                </p>
            </div>
        </section>

        <section id="services" style="background-color: #e0f2f7; padding: 80px 20px; min-height: 800px;">
            <div class="container">
                <h2 style="color: #34495E; font-size: 2em; margin-bottom: 30px; text-align: center;">خدمات ما</h2>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    خدمات ما شامل مشاوره‌های تخصصی، دوره‌های آموزشی آنلاین، توسعه ابزارهای سفارشی و پشتیبانی فنی برای پروژه‌های شماست. ما معتقدیم که با ارائه خدمات جامع، می‌تونیم به شما در رسیدن به اهدافتون کمک کنیم.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    برای دیدن نمونه‌کارها و اطلاعات بیشتر، می‌تونی به صفحه اصلی سایت سر بزنی.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                </p>
                 <!-- تکرار پاراگراف‌ها برای افزایش طول صفحه -->
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    پلتفرم ما به گونه‌ای طراحی شده که هم برای تازه‌کارها و هم برای برنامه‌نویسان با تجربه مفید باشه. از مقالات آموزشی گرفته تا وبینارهای تخصصی، همه چیز برای رشد حرفه‌ای شما آماده است.
                </p>
                <p style="color: #555; font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
                    ما به کیفیت محتوا و ابزارهایی که ارائه میدیم اطمینان داریم. هر کد آماده‌ای که در سایت می‌بینی، توسط تیم ما با دقت بررسی و تست شده تا بهترین تجربه رو برایت فراهم کنه.
                </p>
            </div>
        </section>
    </main>

    <script src="script.js"></script>
</body>
</html>

function copyCode(button, elementId) {
var codeElement = document.getElementById(elementId);
var textToCopy = codeElement.textContent || codeElement.innerText;

var tempTextArea = document.createElement(“textarea”);
tempTextArea.value = textToCopy;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand(“copy”);
document.body.removeChild(tempTextArea);

button.textContent = “کپی شد!”;
setTimeout(() => {
button.textContent = “کپی کد”;
}, 2000);
}

توی این کد:

  • یه تگ <header> با id="smartHeader" داریم که قراره هدر هوشمندمون باشه.
  • داخل هدر، یه لوگو و یه منوی ناوبری <nav> ساده داریم.
  • سه بخش <section> با محتوای زیاد گذاشتم تا صفحه به اندازه کافی بلند باشه و بتونیم اسکرول کنیم. اینجوری رفتار هدر رو بهتر می‌تونیم تست کنیم.
  • فایل‌های style.css و script.js رو هم لینک کردیم که قراره تو مراحل بعدی پرشون کنیم.

مرحله ۲: استایل‌دهی با CSS (چسبندگی و زیبایی)

حالا نوبت فایل style.css هست. یه فایل به همین اسم کنار index.html بساز و کدهای زیر رو توش بریز. این استایل‌ها هدر رو چسبنده می‌کنن و ظاهرش رو هم قشنگ‌تر می‌کنن. مهمترین بخش اینجا position: fixed; هست که هدر رو به بالای صفحه می‌چسبونه.

style.css
/* فونت و تنظیمات عمومی */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap');

body {
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl; /* برای پشتیبانی از زبان فارسی */
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* برای اینکه محتوای هدر ارتفاع کامل رو بگیره */
}

/* استایل هدر */
.main-header {
    background-color: #ffffff;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed; /* چسبنده کردن هدر */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: top 0.3s ease-in-out, background-color 0.3s ease; /* انیمیشن برای پنهان و ظاهر شدن */
}

/* استایل هدر وقتی که مخفیه */
.main-header.hide {
    top: -100px; /* یا هر مقداری بیشتر از ارتفاع هدر */
}

.logo a {
    text-decoration: none;
    font-size: 1.8em;
    font-weight: bold;
    color: #2C3E50;
}

/* استایل ناوبری */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav ul li {
    margin-right: 25px;
}

.main-nav ul li:last-child {
    margin-right: 0;
}

.main-nav ul li a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    font-size: 1.1em;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #1ABC9C;
}

/* استایل محتوای اصلی برای جلوگیری از پنهان شدن زیر هدر */
.main-content {
    padding-top: 80px; /* ارتفاع هدر + مقداری فاصله */
}

/* رسپانسیو بودن */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
        margin-top: 15px;
        align-items: center;
    }

    .main-nav ul li {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }

    .main-nav ul li a {
        display: block;
        padding: 10px;
        background-color: #f2f2f2;
        border-radius: 5px;
    }

    .main-header.hide {
        top: -200px; /* اگر ارتفاع هدر در موبایل بیشتر شد */
    }
}

چند نکته مهم در مورد این CSS:

  • position: fixed; top: 0; left: 0; width: 100%; هدر رو در بالای صفحه ثابت نگه می‌داره.
  • z-index: 1000; مطمئن میشه که هدر همیشه روی بقیه محتوا قرار بگیره.
  • transition: top 0.3s ease-in-out; این باعث میشه وقتی هدر مخفی میشه یا ظاهر میشه، به جای اینکه یهو غیب و ظاهر شه، یه انیمیشن نرم و قشنگ داشته باشه.
  • کلاس .hide رو تعریف کردیم که با top: -100px; (یا هر مقداری بیشتر از ارتفاع هدرت) هدر رو از دید خارج کنه. JavaScript قراره این کلاس رو اضافه و حذف کنه.
  • .main-content { padding-top: 80px; } خیلی مهمه! چون هدر از جریان سند (document flow) خارج شده و ثابت شده، محتوای اصلی به زیرش میره. با این padding-top، محتوا رو از زیر هدر بیرون می‌کشیم. این مقدار رو باید با ارتفاع هدرت تنظیم کنی.
  • بخش @media (max-width: 768px) هم برای رسپانسیو بودن هدر در موبایل و تبلت هست که مطمئن شیم تو همه دستگاه‌ها خوب به نظر میرسه. یادت باشه که این جزئیات طراحی، برای رسپانسیو بودن برای موبایل و تبلت و لپتاب و حتی تلوزیون حیاتیه.

مرحله ۳: منطق هوشمند با JavaScript

اینجا قلب تپنده هدر هوشمندمونه. یه فایل script.js بساز و کدهای زیر رو توش بنویس. این کد می‌فهمه که کاربر داره به کدوم سمت اسکرول می‌کنه و بر اساس اون، کلاس .hide رو به هدر اضافه یا ازش حذف می‌کنه.

script.js
document.addEventListener('DOMContentLoaded', function() {
    const header = document.getElementById('smartHeader');
    let lastScrollY = window.scrollY; // آخرین موقعیت اسکرول
    const headerHeight = header.offsetHeight; // ارتفاع هدر برای محاسبه دقیق تر
    const scrollThreshold = 50; // مقدار آستانه اسکرول برای فعال شدن مخفی/نمایش

    window.addEventListener('scroll', () => {
        const currentScrollY = window.scrollY;

        // فقط وقتی صفحه به اندازه کافی اسکرول شده، منطق رو اعمال کن
        // این کار از چشمک زدن هدر در بالای صفحه جلوگیری میکنه
        if (currentScrollY === 0) {
            // وقتی کاربر کاملا به بالا برگشته
            header.classList.remove('hide');
            lastScrollY = 0;
            return;
        }

        // اگر اسکرول به پایین و بیشتر از آستانه بود
        if (currentScrollY > lastScrollY && currentScrollY > headerHeight + scrollThreshold) {
            header.classList.add('hide'); // هدر رو مخفی کن
        } 
        // اگر اسکرول به بالا و بیشتر از آستانه بود
        else if (currentScrollY < lastScrollY && currentScrollY < window.innerHeight - scrollThreshold) {
            header.classList.remove('hide'); // هدر رو نمایش بده
        }

        lastScrollY = currentScrollY; // موقعیت اسکرول فعلی رو ذخیره کن
    });
});

شرح کد جاوااسکریپت:

  • DOMContentLoaded: مطمئن میشه که کد جاوااسکریپت بعد از بارگذاری کامل DOM اجرا میشه.
  • header: عنصر هدر رو انتخاب می‌کنه.
  • lastScrollY: آخرین موقعیت عمودی اسکرول رو نگهداری می‌کنه تا بتونیم جهت اسکرول رو تشخیص بدیم.
  • headerHeight: ارتفاع هدر رو می‌گیریم که برای محاسبه دقیق‌تر نقطه شروع مخفی شدن هدر، لازمه.
  • scrollThreshold: یه آستانه رو مشخص می‌کنه. مثلاً اگه فقط ۱۰ پیکسل اسکرول کردی، هدر قایم نشه یا ظاهر نشه که یه حس لرزش به کاربر نده. حداقل ۵۰ پیکسل پیشنهاد میشه.
  • window.addEventListener('scroll', ...): به رویداد اسکرول گوش میده. هر وقت صفحه اسکرول شه، تابع داخلش اجرا میشه.
  • داخل تابع، currentScrollY موقعیت فعلی اسکرول رو می‌گیره.
  • چند تا شرط داریم:

    • اگه currentScrollY === 0 بود (یعنی کاربر به بالای صفحه برگشته)، هدر رو نشون بده.
    • اگه currentScrollY > lastScrollY بود (اسکرول به پایین) و از یه آستانه مشخصی عبور کرد، هدر رو مخفی کن (header.classList.add('hide')).
    • اگه currentScrollY < lastScrollY بود (اسکرول به بالا)، هدر رو نشون بده (header.classList.remove('hide')).
  • در نهایت، lastScrollY رو به‌روزرسانی می‌کنیم برای مقایسه در اسکرول بعدی.

نکات پیشرفته و بهینه‌سازی (برای یه برنامه‌نویس خفن!)

کارمون تا اینجا اوکیه، ولی همیشه میشه بهترش کرد. یه برنامه‌نویس واقعی فقط به عملکرد فکر نمی‌کنه، بلکه به پرفورمنس، دسترسی‌پذیری و مقیاس‌پذیری هم اهمیت میده.

۱. پرفورمنس: throttling یا debouncing (مهمه!)

رویداد scroll خیلی سریع و بارها اجرا میشه. اگه منطق سنگینی داخلش داشته باشی، ممکنه سایت کند شه. برای جلوگیری از این مشکل، می‌تونیم از تکنیک‌های throttling یا debouncing استفاده کنیم. این‌ها کاری می‌کنن که تابع اسکرول فقط هر چند میلی‌ثانیه یک بار یا بعد از اتمام اسکرول اجرا بشه.

برای throttling، یه تابع کمکی بساز:

Throttling Example
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

// حالا کد اسکرول رو اینجوری تغییر میدیم:
// window.addEventListener('scroll', throttle(() => {
//     // منطق اسکرول اینجا
// }, 100)); // هر ۱۰۰ میلی‌ثانیه یک بار اجرا شود

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

۲. دسترسی‌پذیری (Accessibility)

همیشه به فکر کاربرانی باش که از کیبورد یا صفحه‌خوان استفاده می‌کنن. مطمئن شو که هدر حتی وقتی مخفیه هم با Tab قابل دسترسی باشه. می‌تونی از aria-hidden="true" وقتی هدر مخفیه استفاده کنی و وقتی ظاهر شد اون رو حذف کنی. اما بهترین راهکار اینه که وقتی هدر مخفی میشه، روی اون display: none; یا visibility: hidden; نذاری، بلکه با transform: translateY(-100%); اون رو به بالا بفرستی، چون transform روی فوکوس کیبورد تاثیر نمی‌ذاره.

۳. ارتفاع هدر پویا (Dynamic Header Height)

اگه ارتفاع هدرت ممکنه تغییر کنه (مثلاً تو موبایل ممکنه چند خطه بشه)، بهتره headerHeight رو داخل رویداد اسکرول به‌روزرسانی کنی یا حداقل مطمئن شی که مقداری که برای top: -XXXpx; تو CSS و headerHeight + scrollThreshold تو JS در نظر گرفتی، همیشه از بلندترین حالت هدرت بیشتر باشه.

عیب‌یابی سریع (Troubleshooting) – حل مشکلات رایج

خب، حتماً پیش میاد که یه چیزی اونجوری که می‌خوای کار نکنه. اینجا چند تا مشکل رایج و راه حلشون رو لیست کردم که کارت سریع راه بیفته:

۱. هدر از اول مخفیه یا اصلا ظاهر نمیشه.

راه حل: مطمئن شو که کلاس .hide از اول روی تگ <header> نیست. هدر باید با استایل اولیه بدون این کلاس لود بشه. همچنین، z-index هدر رو چک کن که از بقیه عناصر صفحه کمتر نباشه.

۲. هدر موقع اسکرول به بالا، یک دفعه ظاهر میشه و انیمیشن نداره.

راه حل: حتماً transition: top 0.3s ease-in-out; رو توی CSS برای .main-header اضافه کردی. اگه از transform: translateY() برای مخفی کردن استفاده می‌کنی، transition: transform 0.3s ease-in-out; رو اضافه کن.

۳. محتوای صفحه زیر هدر پنهان میشه.

راه حل: این مشکل رایجیه چون position: fixed; هدر رو از جریان عادی صفحه خارج می‌کنه. باید به <main> یا <body> یه padding-top بدی که برابر با ارتفاع هدرت باشه. مثلاً اگه هدرت ۷۰ پیکسل ارتفاع داره، padding-top: 70px; رو به .main-content اضافه کن.

۴. هدر در بالا و پایین صفحه هی چشمک میزنه.

راه حل: این بخاطر اجرای بیش از حد و حساس بودن رویداد اسکروله. از تکنیک throttling که بالاتر توضیح دادم استفاده کن. همچنین، scrollThreshold رو کمی افزایش بده تا هدر به هر اسکرول کوچکی واکنش نده. این مشکل اغلب در پیمایش سریع رخ می‌دهد.

۵. در موبایل هدر درست کار نمی‌کنه یا بهم ریخته است.

راه حل: اول <meta name="viewport" content="width=device-width, initial-scale=1.0"> رو تو بخش <head> چک کن. بعد، حتماً از @media queries تو CSS استفاده کن تا استایل‌ها برای سایزهای مختلف صفحه بهینه بشن. ارتفاع هدر در موبایل ممکنه فرق داشته باشه، پس top: -XXXpx; در .main-header.hide رو هم متناسب با ارتفاع هدرت در موبایل تنظیم کن.

جدول مقایسه‌ای: Sticky Header ساده در مقابل Sticky Header هوشمند

برای اینکه تفاوت و ارزش کارمون بهتر درک بشه، بیا یه مقایسه سریع بندازیم بین یه هدر چسبنده ساده و هدر چسبنده هوشمند:

ویژگی هدر چسبنده ساده هدر چسبنده هوشمند
میزان اشغال فضا همیشه در بالای صفحه ثابت است و فضا را اشغال می‌کند. هنگام اسکرول به پایین مخفی شده و فضای محتوا را آزاد می‌کند.
تجربه کاربری (UX) دسترسی همیشگی به منو، اما ممکن است در دستگاه‌های کوچک مزاحم باشد. بهینه برای خواندن محتوا و دسترسی سریع به ناوبری در مواقع لزوم.
پیچیدگی پیاده‌سازی فقط CSS (position: fixed). CSS و JavaScript (ردیابی اسکرول و افزودن/حذف کلاس).
بهینه‌سازی موبایل باید با دقت مدیریت شود تا مزاحم نباشد. ذاتاً برای دستگاه‌های کوچک‌تر بهینه‌تر است.

نتیجه‌گیری

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

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

پرسش‌های متداول (FAQ)

۱. آیا استفاده از هدر چسبنده هوشمند برای سئو (SEO) خوب است؟

بله، اگر به درستی پیاده‌سازی شود. بهبود تجربه کاربری (UX) و افزایش زمان ماندگاری کاربر در سایت، سیگنال‌های مثبتی برای گوگل هستند. مطمئن شوید که هدر محتوای اصلی را پنهان نمی‌کند و سرعت بارگذاری صفحه را کاهش نمی‌دهد.

۲. چه مرورگرهایی از این نوع هدر پشتیبانی می‌کنند؟

کدهای HTML، CSS و JavaScript ارائه شده در این مقاله، از استانداردها پیروی می‌کنند و تقریباً در تمام مرورگرهای مدرن (Chrome, Firefox, Safari, Edge) و حتی نسخه‌های قدیمی‌تر به خوبی کار می‌کنند.

۳. آیا می‌توانم این هدر را بدون JavaScript بسازم؟

ساخت یک هدر “چسبنده” بدون JavaScript امکان‌پذیر است (فقط با position: fixed در CSS). اما برای ایجاد رفتار “هوشمند” (مخفی شدن هنگام اسکرول به پایین و ظاهر شدن هنگام اسکرول به بالا)، نیاز به JavaScript برای ردیابی جهت اسکرول و تغییر کلاس‌های CSS داریم.

۴. چه مقدار padding-top باید به .main-content بدهم؟

باید برابر با ارتفاع دقیق هدر شما باشد. بهترین راه این است که ارتفاع هدر را در مرورگر (با ابزارهای توسعه‌دهنده) اندازه‌گیری کنید و همان مقدار را به عنوان padding-top به عنصر اصلی محتوای خود (مثلاً <main> یا .main-content) اختصاص دهید تا محتوا زیر هدر پنهان نشود.

۵. اگر بخواهم هدر در موبایل همیشه ثابت بماند و هوشمند نباشد، چکار کنم؟

می‌توانید منطق JavaScript را با استفاده از @media queries یا window.innerWidth غیرفعال کنید. مثلاً، در JavaScript چک کنید که اگر عرض صفحه کمتر از ۷۶۸ پیکسل است، تابع اسکرول را متوقف کنید یا کلاس .hide را اعمال نکنید.

© تمامی حقوق برای FATools محفوظ است.

برای ارتباط با تیم فنی، می‌توانید با شماره ۰۹۲۰۲۲۳۲۷۸۹ تماس بگیرید.

چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟

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

خلاصه عملکرد هدر چسبنده هوشمند در یک نگاه

۱. حرکت به پایین (Scroll Down)

هدر از صفحه خارج شده و مخفی می‌شود تا فضای دید کاربر برای مطالعه محتوا حداکثر شود.

۲. حرکت به بالا (Scroll Up)

هدر بلافاصله با افکت نرم انیمیشن ظاهر می‌شود تا منوی ناوبری در دسترس قرار گیرد.

۳. بالای صفحه (At the Top)

هدر در جای اصلی خود قرار دارد، بدون سایه اضافی یا حالت فشرده تا طراحی سایت حفظ شود.

چرا هدر چسبنده هوشمند برای سئو و UX حیاتی است؟

وقتی یک کاربر وارد سایت شما می‌شود، تمام تمرکز او روی مطالعه محتوا یا بررسی محصولات است. هدرهای چسبنده سنتی حدود ۱۰ تا ۱۵ درصد از فضای عمودی صفحه را در موبایل اشغال می‌کنند. این موضوع نرخ پرش (Bounce Rate) را بالا می‌برد؛ زیرا کاربر احساس خفگی در فضای محدود نمایشگر گوشی می‌کند.

هدر هوشمند با حل این مشکل، رضایت کاربران را جلب کرده و در نتیجه سیگنال‌های مثبتی به موتورهای جستجو ارسال می‌کند. بهینه‌سازی این بخش مستقیماً روی فاکتورهای حیاتی وب یعنی Core Web Vitals تأثیرگذار است. با استفاده از کدهای بهینه، از افت سرعت سایت جلوگیری خواهید کرد. برای دسترسی به انواع کدهای بهینه‌سازی، می‌توانید به منبع اصلی مرجع تکه کدهای آماده سر بزنید.

بخش اول: ساختار HTML هدر

برای شروع کار به یک ساختار استاندارد و معنایی (Semantic) در HTML نیاز داریم. استفاده از تگ‌های معنایی مثل <header> و <nav> به درک بهتر موتورهای جستجو از ساختار سایت شما کمک شایانی می‌کند.

اگر می‌خواهید کدهای پایه وب را بهتر بشناسید، حتماً سری به بخش تگ‌های HTML بزنید تا با ساختارهای استانداردتر آشنا شوید.

<header class=“smart-header”>
    <div class=“header-container”>
        <div class=“logo”>
            <a href=“#”>لوگو سایت</a>
        </div>
        <nav class=“nav-menu”>
            <ul>
                <li><a href=“#”>خانه</a></li>
                <li><a href=“#”>محصولات</a></li>
                <li><a href=“#”>وبلاگ</a></li>
                <li><a href=“#”>درباره ما</a></li>
            </ul>
        </nav>
    </div>
</header>

بخش دوم: استایل‌دهی هدر با CSS

راز اصلی پنهان شدن و ظاهر شدن نرم هدر در ویژگی‌های CSS نهفته است. ما از ویژگی position: fixed استفاده می‌کنیم تا هدر روی صفحه شناور بماند. سپس با کلاس‌های کمکی و ویژگی transform: translateY() هدر را بالا و پایین می‌بریم.

برای شخصی‌سازی و دریافت کدهای بیشتر می‌توانید به بخش کدهای آماده CSS مراجعه کنید.

.smart-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

/* این کلاس با جاوا اسکریپت وقتی به پایین اسکرول می‌کنیم اضافه می‌شود */
.smart-header.header-hidden {
    transform: translateY(-100%);
}

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

بخش سوم: کدهای جاوا اسکریپت برای هوشمندسازی

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

برای یادگیری تکنیک‌های بهینه‌سازی جاوا اسکریپت، به دسته کدهای جاوا اسکریپت مراجعه نمایید.

let lastScrollTop = 0;
const header = document.querySelector(‘.smart-header’);
const threshold = 10; // آستانه اسکرول بر حسب پیکسل

window.addEventListener(‘scroll’, () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // بررسی اینکه آیا اسکرول به اندازه کافی بوده است یا خیر
    if (Math.abs(lastScrollTop – scrollTop) <= threshold) {
        return;
    }

    if (scrollTop > lastScrollTop && scrollTop > 70) {
        // اسکرول به سمت پایین -> مخفی کردن هدر
        header.classList.add(‘header-hidden’);
    } else if (scrollTop < lastScrollTop) {
        // اسکرول به سمت بالا -> نمایش هدر
        header.classList.remove(‘header-hidden’);
    }

    lastScrollTop = scrollTop;
});

توضیح کد بالا: متغیر threshold یا آستانه به این دلیل اضافه شده است که با لرزش‌های کوچک دست در موبایل، هدر مدام تغییر وضعیت ندهد و تجربه ناخوشایندی ایجاد نشود. این ظرافت‌های کوچک است که کیفیت کار نهایی شما را ارتقا می‌دهد.

پیاده‌سازی هدر هوشمند در وردپرس بدون افزونه

برای پیاده‌سازی این کار در وردپرس، نیازی به نصب افزونه‌های سنگین و سنگین‌تر کردن قالب نیست. این کار به سادگی و از طریق قرار دادن کدها در فایل‌های قالب انجام می‌شود. شما می‌توانید از بخش سفارشی‌سازی وردپرس کدهای بالا را اضافه کنید یا مستقیماً در فایل header.php و فایل‌های JS خود درج نمایید.

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

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

مقایسه انواع هدر در وب‌سایت‌ها

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

ویژگی و نوع هدر تحلیل کارایی و تجربه کاربر
هدر معمولی (استاتیک) ساده‌ترین پیاده‌سازی، اما با اسکرول کردن کاربر منوها کاملاً گم می‌شوند و دسترسی به ناوبری سخت می‌شود.
هدر چسبنده ساده (Sticky) دسترسی همیشگی به منو دارد اما فضای مفید صفحه نمایش (View Port) را به شدت محدود می‌کند، به ویژه در موبایل.
هدر چسبنده هوشمند بهترین گزینه؛ تعادل کامل بین دسترسی سریع به ناوبری و آزادسازی فضای صفحه در حین مطالعه.

عیب‌یابی سریع و رفع مشکلات رایج

در حین پیاده‌سازی این موضوح ممکن است با مشکلاتی روبرو شوید که در ادامه راه‌حل رفع فوری آن‌ها آورده شده است:

  • مشکل: هدر پشت المان‌های دیگر صفحه پنهان می‌شود.
    راه‌حل: مقدار z-index هدر را در استایل‌های CSS به مقدار بالایی مانند 99999 تغییر دهید.
  • مشکل: انیمیشن پنهان شدن هدر پرش دارد و نرم نیست.
    راه‌حل: مطمئن شوید که ویژگی transition را روی کلاس اصلی هدر قرار داده‌اید و نه روی کلاس header-hidden.
  • مشکل: در دستگاه‌های لمسی اسکرول به بالا درست کار نمی‌کند.
    راه‌حل: مقدار متغیر threshold در جاوا اسکریپت را کمی افزایش دهید (مثلاً بین 10 تا 15 پیکسل) تا نوسانات اسکرول خنثی شود.

سوالات متداول کاربران

آیا این کد در تمام مرورگرها کار می‌کند؟

بله، کدهای ارائه شده بر پایه استانداردهای مدرن وب (ES6 و CSS3) هستند و بدون مشکل در تمام مرورگرهای دسکتاپ و موبایل پشتیبانی می‌شوند.

چگونه می‌توان سرعت حرکت هدر را تغییر داد؟

با تغییر زمان در ویژگی transition: transform 0.3s ease-in-out; می‌توانید سرعت باز و بسته شدن هدر را به دلخواه تنظیم کنید.

آیا پیاده‌سازی این هدر برای سرعت سایت مشکل‌ساز است؟

خیر، کدهای نوشته شده با جاوا اسکریپت وانیلا و کاملاً بهینه‌سازی شده هستند و هیچ کتابخانه اضافی بارگذاری نمی‌کنند؛ به همین جهت هیچ تاثیر منفی روی سرعت لود صفحه نخواهند داشت.

Table of Contents

آخرین نوشته‌ها

دسته‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *