در این آموزش،طراحی هدر چسبنده با المنتور را با هم انجام خواهیم داد . که هنگام اسکرول کردن به پایین پنهان می شود و هنگام اسکرول به بالا دوباره ظاهر می شود.
آنچه برای این آموزش نیاز دارید
اولاً، اگر آموزش را قدم به قدم دنبال کنید، بسیار آسان است. و به راحتی می توانید این هدر چسبنده را برای وب سایت خود پیاده سازی کنید. حتی زمانی که در این آموزش ما از جاوا اسکریپت و CSS استفاده خواهیم کرد، شما واقعاً نیازی به دانستن نحوه کدنویسی ندارید. تنها کاری که باید انجام دهید این است که آنچه را که به شما نشان می دهم کپی و پیست کنید. و اگر گیر کردید، یک آموزش ویدیویی در پایین این پست وجود دارد.
در واقع، ما برای انجام هر کاری واقعاً به Elementor Pro نیاز داریم. نسخه رایگان برای توسعه دهندگان وب کافی نیست. چون باید برای انجام بهتر کار های از نسخه المنتور پرو استفاده کنیم چون زمانی که از المنتور رایگان استفاده می کنید باید کلی افزونه جانبی نصب کنید تا شاید بتوانید کاری که به راحتی با المنتور پرو قابل انجام است انجام دهیم.
چگونه هدر چسبنده را در اسکرول پنهان کنیم
این افکت هدر شما را هنگامی که کاربر به پایین اسکرول می‌کند، پنهان می‌کند. این به حذف حواس پرتی برای کاربر وب سایت کمک می کند. و سپس، هنگامی که کاربر به سمت بالا حرکت می کند، هدر و منو دوباره ظاهر می شوند. به این ترتیب کاربر مجبور نیست به بالای وب سایت پیمایش کند. همه اینها با هدف بهبود رابط کاربری وب سایت است.
ما این کار را با افزودن کمی جاوا اسکریپت انجام می دهیم که هدر را به سمت بالا و خارج از صفحه نمایش می برد. و وقتی به پایین اسکرول می کنیم، جاوا اسکریپت هدر را به سمت پایین می کشد. در واقع بسیار ساده است، و روشی که به شما نشان خواهم داد احتمالاً ساده ترین راه برای انجام این کار است.
مرحله 1: با المنتور یک هدر بسازید
هدر خود را همانطور که معمولاً انجام می دهید بسازید. نکته مهم در اینجا این است که هدر خود را فقط در با استفاده از یک سکشن یا کانتینر بسازید. و اگر می خواهید هدر موبایل و تبلت نیز چنین افکتی داشته باشند،باید برای موبایل و و تبلت هم مانند نسخه دسکتاپ از یک سکشن استفاده نمایید.
اگر نمی‌خواهید موبایل شما این اثر را داشته باشد، منوی موبایل خود را در قسمت خودش ایجاد کنید و از Responsive Conditions برای مخفی کردن بخش موبایل روی دسکتاپ استفاده کنید.
مرحله 2: سربرگ المنتور خود را چسبناک کنید
ما باید هدر را چسبناک کنیم. به تب advance سکشن اصلی بروید و Motion Effects را انتخاب کنید. در گزینه Sticky، آن را به “بالا” تبدیل کنید.
مرحله 3: شناسه CSS را به بخش هدر خود اضافه کنید
در قسمت هدر خود، به تب Advanced بروید و در قسمت شناسه hide-header را به عنوان شناسه CSS خود اضافه کنید. و این تمام کاری است که باید با هدر خود انجام دهید.
مرحله 4: جاوا اسکریپت را کپی و جایگذاری کنید
در مرحله بعد باید یک قطعه جاوا اسکریپت را کپی و پیست کنیم. آنچه مهم است اضافه کردن آن در مکان صحیح است. ما قصد داریم جاوا اسکریپت را با استفاده از قسمت کد سفارسی در المنتور پرو اضافه کنیم.
در داشبورد وردپرس خود از قسمت المنتور به بخش کد سفارشی می رویم .
Add New را انتخاب کنید و مکان را روی End تنظیم کنید. با این روش این قطعه جاوا اسکریپت را به پاورقی هر صفحه اضافه می کنیم. این یک روش ایده آل است زیرا بر زمان و سرعت بارگذاری وب سایت شما تأثیر نمی گذارد.
مرحله 5: جاوا اسکریپت و CSS را تنظیم کنید
فقط دو بخش وجود دارد که باید آن را تنظیم کنید تا برای وب سایت شما کار کند.
کد جاوا اسکرییپت
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("hide-header").style.top = "0"; } else { document.getElementById("hide-header").style.top = "-80px"; /* این مقدار را بر اساس ارتفاع هدر خود تنظیم کنید */ } prevScrollpos = currentScrollPos; } </script> |
جایی که .style.top = “-80px” را می بینید. در این قسمت، 80 پیکسل را برای مطابقت با ارتفاع هدر خود تنظیم کنید. اگر قسمتی از هدر شما همچنان در هنگام اسکرول کردن به پایین نشان داده می‌شود، مقدار را تا زمانی که هدر کاملاً خارج از صفحه نمایش باشد، بیشتر کنید.
کد CSS
|
1 2 3 4 5 6 |
<style> /* سرعت نمایش یا مخفی شدن هدر را تنظیم می کند */ #hide-header { transition: all .4s ease!important; } </style> |
جایی که شما انتقال را می بینید: همه 0.4s ease!مهم. این سرعت بالا و پایین رفتن هدر را کنترل می کند. 0.4s 0.4 ثانیه است. بنابراین، برای مثال، اگر این را روی 1s تنظیم کنید، یک ثانیه کامل طول می کشد تا بالا و پایین برود. می توانید این را تنظیم کنید تا سرعت انیمیشن مناسب برای هدر خود را پیدا کنید.
در اینجا یک آموزش تصویری برای کسانی است که ترجیح می دهند به صورت تصویری آموزش هدر چسبنده را تماشا کنند قرار داده ایم اگر سوالی دارید، آنها را در نظرات مطرح کنید. همچنین برای دریافت تازه ترین آموزش های ما در شبکه های مجازی می توانید ما را در صفحه اینستاگرام ما دنبال کنید و از طریق صفحه تماس با ما با مشاورین ما در امر طراحی وب سایت برای کسب و کار خود به صورت رایگان مشاوره بگیرید.