آموزش فیکس کردن هدر سایت در html

باید و نباید های فیکس کردن هدر سایت

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

باید ها و مزایا

• هدر فیکس اگر به درستی پیاده سازی شود ظاهر سایت شما را زیبا تر می کند.
• این شکل از هدر UX یا تجربه کاربری خوبی دارد، زیرا کاربر هرزمان که نیاز داشت می تواند به هدر دسترسی داشته باشد.
• اگر لوگو در هدر باشد باعث تکرر مشاهده لوگو و تثبیت آن در ذهن کاربر می شود.

نباید ها و مزایا

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

نکته مهم در مورد فیکس کردن هدر سایت

جهت فیکس کردن هدر هنگام اسکرول کردن باید دو مورد را در نظر بگیریم. ابتدا main دقیقا باید در زیر هدر قرار بگیرد. یادتان باشد که ما به هدر پوزیشن fix داده بودیم. مرحله دوم این است که Header ما زمانی که به پایین صفحه scroll می کنیم باید حرکت کند. برای حل کردن مسئله اول ما خصوصیت padding-top رو به المان main خود اضافه می کنیم. مقداری که برای این خصوصیت در نظر می گیریم باید به میزان ارتفاعی که برای header در نظر گرفته ایم باشد.

پیاده سازی مرحله به مرحله هدر فیکس در html

HTML
ابتدا کدهای html را می نویسیم و بهتر است این کدها در تگ header و nav نوشته شوند.
CSS
راه های مختلف برای نوشتن کدها CSS وجود دارد. شما می توانید از کدهای آماده استفاده کنید یا اینکه خودتان کدها را بنویسید و مدیریت کنید. یکی از مرسوم ترین روش ها برای کدزنی CSS برای هدر فیکس به شرح زیر است.

header {
position: fixed;
top: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
background: #DD3543;
}
nav {
display: flex;
align-items: flex-end;
justify-content: space-between;
transition: align-items .2s;
}
.logo {
font-size: 2rem;
display: inline-block;
padding: 20px 30px;
background: #F35B66;
color: #fff;
margin: 50px 0 0 50px;
transition: all .2s;
}
ul {
display: flex;
margin: 50px 50px 0 0;
padding: 0;
transition: margin .2s;
}
li:not(:last-child) {
margin-right: 20px;
}
li a {
display: block;
padding: 10px 20px;
}
.toggle-menu {
display: none;
font-size: 2rem;
margin: 10px 10px 0 0;
transition: margin .2s;
}
main {
display: block;
padding: 0 20px;
}
JavaScript

تا الان تنها ساختار بندی و استایلنگ را انجام داده ایم و از الان مهم ترین کار ما آغاز می شود. اکنون باید کدهای جاوااسکریپت را مدیریت کنیم. در واقع اصلی ترین کار در فیکس کردن هدر سایت در هنگام اسکرول را این کدها انجام می دهند. در قدم اول باید میزان ارتفاع header رو محاسبه کرده و سپس این مقداری که با کمک جاوا اسکریپت محاسبه کردیم را به خصوصیت padding-top که برای المان main در نظر گرفته بودیم، اضافه کنیم.

var pzFixer = document.querySelector(“main”);
var height = document.querySelector(“header”);
var headerHeight;

تا اینجا متغییر ها را تعریف کردیم. حالا می توانیم از جاوااسکریپت ساده استفاده کنیم و یا به سراغ سینتکس ES6 برویم.

function setTopPadding() {
hHeight = h.offsetHeight;
m.style.paddingTop = hHeight + “px”;
}
// ES6
const setTopPadding = () => {
hHeight = h.offsetHeight;
m.style.paddingTop = `${ hHeight }px`;
}

برای اعمال این تغییرات ما از خصوصیت offsetHeight برای بازیابی ارتفاع header استفاده کردیم. حالا برای زمانی که scroll کردیم:

function onScroll() {
window.addEventListener(“scroll”, callbackFunc);
function callbackFunc() {
var y = window.pageYOffset;
if (y > 150) {
h.classList.add(“scroll”);
} else {
h.classList.remove(“scroll”);
}
}
}

در این جا ما از یکی از ویژگی های المان خود به نام pageYOffset کمک می گیریم تا حدی که به سمت پایین اسکرول شده است را بدست آوریم. سپس باید از classList استفاده کنیم تا بتوانیم کلاس scroll را به header بدهیم. باید به این نکته هم توجه کنید که همه ی مرورگرها از این خصوصیتی که ما استفاده کردیم، پشتیبانی نمی کنند. در نهایت ما تابع های خود را در 2 حالت صدا می زنیم:

• اول زمانی که صفحه ما در حال لود/بارگذاری است.
• دوم زمانی که ما اندازه صفحه ی خود را دست کاری می کنیم.

window.onload = function() {
setTopPadding();
onScroll();
};
window.onresize = function() {
setTopPadding();
};

در زمانی که اسکرول کردن ما از حد مورد نظر رد شد، ما یک سری کد دیگر CSS را جایگزین می کنیم:

.scroll {
box-shadow: 0 7px 0 0 rgba(0, 0, 0, .1);
}
.scroll .logo {
padding: 10px 20px;
font-size: 1.5rem;
}
.scroll nav {
align-items: center;
}
.scroll .logo, .scroll ul, .scroll .toggle-menu {
margin: 0;
}

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

@media screen and (max-width: 1060px) {
header {
padding: 10px;
}
nav {
align-items: center;
}
ul {
display: none;
}
.logo {
font-size: 1.8rem;
margin: 10px 0 0 10px;
}
.toggle-menu {
display: block;
}
}

کتابخانه ها و فریم ورک ها

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

$(document).ready(function () {
$(window).resize(function () {
var footerHeight = $(“.footer”).outerHeight();
var stickFooterPush = $(“.push”).height(footerHeight);

$(“.wrapper”).css({
marginBottom: “-” + footerHeight + “px”,
});
});

$(window).resize();

});

موضوع مهم Browser Supports

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

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

نگاهی به عملکرد و حل موضوع بازه callbackFunc

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

به خصوص در زمانی که تابع callbackFunc ما شامل بسیاری از مواردی می شود که در زمان scroll up و scroll down کردن صفحه باید اجرا شوند. در این جا راه کارهای گوناگونی وجود دارد، ولی به بررسی مختصر یکی از راه حل ها می پردازیم. به خصوص ما می خواهیم به تابع های خود اجازه بدهیم که در 200 میلی ثانیه یک بار اجرا شوند. برای پیاده سازی این تابع ما از Lodash بهره می بریم که یک کتابخانه سودمند به زبان جاوااسکریپت هست. این کتابخانه دریچه هایی که ما نیاز داریم را در اختیار ما می گذارد. اول ما این کتابخانه رو در پروژه خود تعریف کرده سپس کد زیر رو جایگزینش می کنیم:

window.addEventListener(“scroll”, callbackFunc);
window.addEventListener(“scroll”, _.throttle(callbackFunc, 200));