انواع هدر چسبیده به بالای صفحه

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

قبل از شروع مطلب لازمه توضیحی در مورد خصوصیت position: fixed در css بدهم که اصلی ترین خصوصیت css در این مطلب است. این خصوصیت همانطور که از نام آن پیداست اگر به هر المانی اختصاص داده شود آن المان را در اسکرین فیکس می‌نماید. نکته‌ای که باید در مورد این خصوصیت در نطر داشته باشید این است که المان ما در اسکرین ثابت می‌شود و نه در المان parent یا کل صفحه. مابقی خصوصیات آن شبیه به position: absolute است که من فرض میکنم آن را می‌شناسید.

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


<div class="header">
    <ul class="navbar">
        <li>Home</li>
        <li>About</li>
        <li>Products</li>
        <li>Contact</li>
   </ul>
</div>
<div class="page">
our page starts from here!
</div>

توچه کنید که در این ساختار سعی کردم تا حد امکان ساده‌ترین حالت را پیاده کنم تا بتوانیم تمرکز را روی مبحث اصلی بگذاریم. برای مثال منوی اصلی ما فاقد تگ <a> می‌باشد.

 

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

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


<div class="header-holder">
    <div class="header">
        <ul class="navbar">
            <li>Home</li>
            <li>About</li>
            <li>Products</li>
            <li>Contact</li>
        </ul>
    </div>
</div>
<div class="page">
our page starts from here!
</div>

نباید فراموش کنید که ارتفاع هدر اصلی و نگهدارنده آن بایستی هم اندازه باشد چرا که header-holder ما قرار است که نقش header ما را بازی کند. برای این کار اگر از ابتدا می‌دانیم که هدر ما ارتفاع ثابتی دارد با استفاده از css ارتفاع ثابتی را به هر دو می‌دهیم ولی اگر ارتفاع بصورت داینامیک تغییر خواهد کرد بایستی با استقاده از jQuery ارتفاع آن‌ها را یکسان نماییم. برای این منظور کد زیر را در فایل javascript خود اضافه نمایید. فراموش نکنید که کتابخانه jQuery در صفحه قرار داده شده باشد.


var header = $('.header');
var headerHolder = $('.header-holder');

// assign the main header height
// to header holder
headerHolder.css('height', header.outerHeight());

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

See the Pen fixed menu 1 by Hossein (@hossein84) on CodePen.

 

هدر همیشه در بالای صفحه ثابت است و بر روی محتوای صفحه قرار دارد

در این مدل بسته به نوع طراحی صفحه هدر علاوه بر اینکه ثابت است همچنین بر روی محتوای صفحه قرار دارد که معمولا رنگ زمینه آن شفاف یا transparent در نظر گرفته می‌شود تا محتوای زیر آن نمایش داده شود. برای این مدل همان ساختار ابتدایی را بدون المان header-holder در نظر میگیریم با این تفاوت که زمینه را transparent می‌نماییم. خروچینهایی به شکل زیر خواهد بود:

See the Pen fixed menu 2 by Hossein (@hossein84) on CodePen.

 

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

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

در ادامه به برخی قسمتهای کلیدی کدهای jquery این مدل اشاره میکنیم.

پیدا کردن پوزیشن بالای منوی اصلی:


var menuOffsetTop = menuSectionHolder.offset().top;

چک کردن صفحه به ازای هر پیکسل اسکرول:


$(window).on('scroll', function(){
  // our codes for each pixel come ehere
});

افزودن کلاس به المان:


menuSection.addClass('stick');

حذف کلاس از المان:


menuSection.removeClass('stick');

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

See the Pen fixed menu 3 by Hossein (@hossein84) on CodePen.

  • مریم ۱۳۹۷/۱۰/۱۲

    بسیار عالی و کاربردی ممنونم

نظر شما چیست؟
فرم شما با خطا مواجه شده است:
    با تشکر. نظر شما با موفقیت ثبت شد و پس از تایید مدیریت نمایش داده خواهدشد.