آموزش طراحی هدرهای چسبنده (Sticky Header) با تغییر استایل ملایم هنگام اسکرول

/* style.css (ادامه) */
.header.sticky {
    background-color: #fff; /* تغییر رنگ پس‌زمینه به سفید */
    padding: 10px 0; /* کاهش پدینگ */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* اضافه کردن سایه */
}

.header.sticky .logo a {
    color: #333; /* تغییر رنگ لوگو */
    font-size: 24px; /* کوچکتر شدن لوگو */
}

.header.sticky .main-nav ul li a {
    color: #555; /* تغییر رنگ آیتم‌های منو */
}

.header.sticky .main-nav ul li a:hover {
    color: #007bff; /* رنگ هاور مثل قبل */
}
    

(برای کپی کردن، کد را انتخاب کنید.)

همونطور که می‌بینی، برای کلاس `.sticky` استایل‌های جدیدی تعریف کردیم که شامل تغییر رنگ پس‌زمینه، پدینگ و سایه میشه. همچنین رنگ لوگو و آیتم‌های منو هم عوض میشه. دقت کن که از `transition` در کلاس `.header` استفاده کردیم تا این تغییرات به نرمی اتفاق بیفتن. این ترانزیشن‌ها واقعاً در چشم‌نواز بودن هدر تاثیر دارن.

قدم سوم: افزودن جادوی جاوااسکریپت برای چسبندگی و تغییر استایل

اینجاست که جاوااسکریپت وارد عمل میشه. ما نیاز داریم تشخیص بدیم کاربر چقدر صفحه رو اسکرول کرده و بر اساس اون، کلاس `.sticky` رو به هدر اضافه یا ازش حذف کنیم.

تشخیص موقعیت اسکرول

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

اعمال کلاس چسبنده

کد زیر رو در فایل `script.js` قرار بده. این کد، هدر رو پیدا می‌کنه و با استفاده از رویداد `scroll`، وضعیت چسبندگی رو مدیریت می‌کنه.

// script.js
window.onscroll = function() { stickyHeader() };

let header = document.getElementById("myHeader");
let stickyOffset = header.offsetTop; // موقعیت اولیه هدر نسبت به بالای صفحه

function stickyHeader() {
    if (window.pageYOffset > stickyOffset) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
}

// در صورتی که هدر اولیه fixed بود، باید offsetTop رو به گونه‌ای تنظیم کنیم که
// بعد از یک اسکرول مشخص فعال بشه.
// در این مثال چون header از ابتدا fixed است، stickyOffset باید بر اساس ارتفاع header
// یا یک مقدار دلخواه (مثلاً 50px) تنظیم شود.
// بهتر است مقدار stickyOffset را یک عدد ثابت (مثلا 50px) در نظر بگیریم
// یا یک div خالی قبل از هدر بگذاریم و offsetTop آن را بگیریم.
// راه حل پیشنهادی:
// const initialHeaderHeight = header.offsetHeight;
// stickyOffset = initialHeaderHeight; // مثلا 80 پیکسل بعد از اسکرول
// اما ساده‌ترین راه برای این مثال:
stickyOffset = 50; // هدر بعد از 50 پیکسل اسکرول چسبنده می‌شود.

    

(برای کپی کردن، کد را انتخاب کنید.)

قدم چهارم: ظریف‌کاری‌ها و تغییر استایل ملایم در CSS

ترانزیشن‌ها (Transitions) در CSS، همون عنصر جادویی هستن که تغییر استایل رو از حالت ناگهانی به حالت نرم و روان تبدیل می‌کنن. بدون ترانزیشن، هدر به صورت یکدفعه‌ای استایلش عوض میشه که اصلاً جلوه خوبی نداره.

ترانزیشن‌های CSS برای حرکت نرم

ما از قبل توی کلاس `.header` ترانزیشن‌ها رو برای `background-color`, `padding` و `box-shadow` تعریف کردیم. این یعنی هر تغییری که در این ویژگی‌ها ایجاد بشه، به نرمی و طی 0.3 ثانیه اتفاق میفته. این عدد `0.3s` رو میتونی به دلخواه خودت تغییر بدی تا سرعت تغییر استایل کم یا زیاد بشه. مثلاً برای یک تغییر استایل سریعتر، میتونی `0.2s` و برای یک تغییر کندتر `0.5s` بذاری.

تغییر رنگ، اندازه و سایه

توی کلاس `.header.sticky` که توی قدم دو نوشتیم، دقیقا این تغییرات رو اعمال کردیم:

• `background-color`: از مشکی به سفید (یا هر رنگ دلخواه دیگه).
• `padding`: از `15px 0` به `10px 0` (کاهش ارتفاع هدر).
• `box-shadow`: اضافه کردن سایه برای جلوه برجسته.
• `font-size` لوگو و `color` آیتم‌های منو: برای هماهنگی بیشتر با استایل جدید.

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

نکته‌های مهم برای یک هدر چسبنده بی‌نقص و ریسپانسیو

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

رسپانسیو بودن در موبایل و تبلت

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

/* style.css (استایل‌های رسپانسیو) */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column; /* در موبایل آیتم‌ها زیر هم قرار بگیرند */
        padding: 0 15px;
    }

    .main-nav ul {
        margin-top: 10px;
        flex-wrap: wrap; /* برای اینکه آیتم‌ها در یک خط جا نشدند، به خط بعدی بروند */
        justify-content: center;
    }

    .main-nav ul li {
        margin: 0 10px 10px 0; /* پدینگ برای آیتم‌های منو */
    }

    .header.sticky {
        padding: 8px 0; /* پدینگ کمتر در حالت چسبنده موبایل */
    }

    .header.sticky .logo a {
        font-size: 20px; /* لوگو کوچکتر در حالت چسبنده موبایل */
    }
}
    

(برای کپی کردن، کد را انتخاب کنید.)

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

توجه به محتوای زیر هدر

وقتی هدر رو `position: fixed` میکنی، از جریان طبیعی سند خارج میشه و محتوای زیرش به سمت بالا حرکت میکنه و ممکنه زیر هدر قرار بگیره. برای حل این مشکل، باید به `body` یا اولین `div` بعد از هدر، یک `padding-top` به اندازه ارتفاع هدر بدی. مثلاً اگه ارتفاع هدر 80 پیکسل باشه، `padding-top: 80px;` رو اعمال کن. این کار باعث میشه محتوا از زیر هدر بیرون بیاد.

بهینه‌سازی عملکرد (Performance Optimization)

رویداد `scroll` خیلی زود به زود فعال میشه. اگه تابع `stickyHeader` تو کارهای سنگینی انجام بده، ممکنه باعث کندی و لگ در اسکرول بشه. برای جلوگیری از این مشکل، میتونی از تکنیک `debounce` یا `throttle` استفاده کنی. این تکنیک‌ها باعث میشن تابع اسکرول با تاخیر یا در فواصل زمانی مشخص اجرا بشه و بار روی مرورگر رو کم کنن. البته برای این مثال ساده، نیازی بهش نیست، اما برای پروژه‌های بزرگتر، حتما بهش فکر کن.

آزمایش‌پذیری و دیباگ (Debug)

همیشه کدتو در مرورگرهای مختلف (کروم، فایرفاکس، سافاری) و در اندازه‌های مختلف صفحه تست کن. از ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای بررسی استایل‌ها و رفتار جاوااسکریپت استفاده کن. با `console.log()` در جاوااسکریپت، میتونی مقدار `pageYOffset` و وضعیت اضافه/حذف شدن کلاس رو بررسی کنی.

عیب‌یابی سریع: مشکلات رایج و راه‌حل‌های آن‌ها

تو مسیر کدنویسی، ممکنه با مشکلاتی روبرو بشی. اینجا چندتا از رایج‌ترین‌ها رو با راه‌حلشون آوردیم:

• مشکل: هدر کلاً چسبنده نمیشه.
  
  راه‌حل: مطمئن شو که `id=”myHeader”` رو به تگ هدرت دادی و جاوااسکریپت هم درست فایل `script.js` رو لود کرده. همچنین چک کن که مقدار `stickyOffset` درست تنظیم شده باشه و `window.pageYOffset` ازش بزرگتر بشه. `position: fixed` در CSS هدر هم خیلی مهمه.
• مشکل: هدر چسبنده میشه، اما محتوای زیرش زیر هدر میره.
  
  راه‌حل: باید به عنصر بعد از هدر یا به `body` یک `padding-top` به اندازه ارتفاع هدر بدی. مثلاً اگر هدرت 60 پیکسل ارتفاع داره، `body { padding-top: 60px; }` اضافه کن.
• مشکل: تغییر استایل ناگهانیه، نه ملایم.
  
  راه‌حل: مطمئن شو که در CSS، برای کلاس `.header` ویژگی `transition` رو اضافه کردی: `transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;`. اگر برای ویژگی خاصی ترانزیشن تعریف نشده باشه، اون ویژگی ناگهانی تغییر می‌کنه.
• مشکل: هدر در موبایل خوب به نظر نمیاد یا کار نمیکنه.
  
  راه‌حل: از `meta name=”viewport”` در تگ `<head>` مطمئن شو. از Media Queries برای اعمال استایل‌های خاص موبایل استفاده کن. ارتفاع و پدینگ هدر رو در موبایل کمتر کن تا فضای بیشتری برای محتوا ایجاد بشه.
• مشکل: هنگام اسکرول، لگ (lag) یا کندی احساس میشه.
  
  راه‌حل: این مشکل ممکنه به خاطر کدنویسی سنگین در تابع `stickyHeader` باشه. میتونی از `throttle` یا `debounce` در جاوااسکریپت استفاده کنی تا تابع با نرخ کمتری اجرا بشه و عملکرد سایت بهبود پیدا کنه.
• مشکل: لینک‌های داخلی به صفحات دیگر اسنیپت‌ها به درستی کار نمی‌کنند.
  
  راه‌حل: مطمئن شو که آدرس دهی به صفحات `fa-tools.ir/snippets/` به درستی و بدون هیچ اشتباهی انجام شده باشه. گاهی یک `/` اضافی یا کم می‌تواند مشکل ایجاد کند. از ابزار `Inspect Element` مرورگر برای بررسی آدرس لینک‌ها استفاده کن.

سوالات متداول (FAQ)

function copyCode(buttonElement) {
const codeElement = buttonElement.nextElementSibling.querySelector(‘code’);
const textToCopy = codeElement.innerText;

navigator.clipboard.writeText(textToCopy).then(() => {
const originalText = buttonElement.innerText;
buttonElement.innerText = ‘کپی شد!’;
setTimeout(() => {
buttonElement.innerText = originalText;
}, 2000);
}).catch(err => {
console.error(‘Failed to copy text: ‘, err);
alert(‘خطا در کپی کردن کد. لطفا به صورت دستی کپی کنید.’);
});
}

/* Global styles for responsiveness and aesthetics (for the block editor) */
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
direction: rtl;
text-align: right;
margin: 0;
background-color: #f8f8f8;
}
h1, h2, h3 {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
color: #1a1a1a;
margin-top: 1.5em;
margin-bottom: 0.8em;
}
h1 { font-size: 2.2em; font-weight: bold; text-align: center; }
h2 { font-size: 1.8em; font-weight: bold; border-bottom: 2px solid #eee; padding-bottom: 10px; }
h3 { font-size: 1.4em; font-weight: bold; color: #555; }
p {
margin-bottom: 1em;
font-size: 1.05em;
line-height: 1.7;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
list-style-type: disc;
margin-right: 20px;
padding: 0;
margin-bottom: 1em;
}
li {
margin-bottom: 0.5em;
font-size: 1.05em;
}
pre {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
position: relative;
}
code {
font-family: ‘Fira Code’, ‘Monaco’, ‘Consolas’, monospace;
font-size: 0.95em;
display: block; /* Ensure code block takes full width */
}

/* Responsive adjustments for tables and infographic */
@media (max-width: 768px) {
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
p, li { font-size: 1em; }
.info-graphic-box > div {
width: 100% !important; /* Force full width on small screens */
margin-bottom: 10px;
}
.header .container {
flex-direction: column;
align-items: flex-end; /* Adjust alignment for RTL in mobile */
}
.main-nav ul {
flex-direction: column;
align-items: flex-end; /* Adjust alignment for RTL in mobile */
margin-top: 15px;
}
.main-nav ul li {
margin-bottom: 10px;
margin-right: 0; /* Remove right margin for vertical stack */
}
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; margin-bottom: 10px; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50% !important; /* Space for label */
text-align: right !important;
}
td:before {
position: absolute;
right: 6px;
width: 45%;
padding-left: 10px;
white-space: nowrap;
content: attr(data-label); /* Use data-label for content */
font-weight: bold;
text-align: right;
color: #555;
}
/* Specific labels for the table */
table tr:nth-of-type(1) td:nth-of-type(1):before { content: “روش:”; }
table tr:nth-of-type(1) td:nth-of-type(2):before { content: “توضیحات:”; }
table tr:nth-of-type(2) td:nth-of-type(1):before { content: “روش:”; }
table tr:nth-of-type(2) td:nth-of-type(2):before { content: “توضیحات:”; }
}
/* Styles for the “کپی کد” button */
.copy-button {
background-color: #5cb85c; /* Green */
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
user-select: none; /* Prevent text selection */
border: none;
outline: none;
transition: background-color 0.2s ease;
}
.copy-button:hover {
background-color: #4cae4c;
}

// Polyfill for navigator.clipboard.writeText for older browsers if needed,
// but modern browsers support it well enough.
// The copy button is already implemented using inline onclick and standard JS.