آموزش مخفی کردن/ نمایش دادن سربرگ در اسکرول

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print

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

به این صورت که در هنگام اسکرول به پایین سربرگ مخفی می شود و در اسکرول به بالا سربرگ نمایش داده می شود.

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

برای استفاده از این آموزش به 2 افزونه زیر نیاز داریم:

طراحی سربرگ توسط المنتور

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

تنظیمات سربرگ برای حالت چسبان

وارد قالب سربرگ طراحی شده در المنتور شده و در تب پیشرفته گزینه ایندکس Z را روی 999 قرار دهید. این کار برای قرار گرفتن سربرگ روی تمامی المان های صفحه می باشد.

همچنین در بخش شناسه CSS مقدار stickyheaders را قرار دهید.

سربرگ چسبنده با المنتور

سپس از تب موشن افکت، گزینه شناور را روشن کرده و روی گزینه بالا قرار دهید.

سربرگ چسبنده با المنتور

حالا به تب CSS سفارشی رفته و کد زیر را داخل کادر قرار دهید:

#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}

توجه کنید در گزینه translateY(-110px); باید مقدار ارتفاع سربرگ خودتان را به صورت منفی قرار دهید.

اگر سربرگی طراحی کردید که 90 پیکسل ارتفاع دارد باید مقدار translateY(-90px) باشد.

قرار دادن کد جاوا اسکریپت در وردپرس

بعد از نصب افزونه Simple Custom CSS and JS داخل پیشخوان وردپرس، تب Custom CSS & JS گزینه Add Custom JS را بزنید.

در صفحه باز شده ابتدا یک عنوان انتخاب کنید و کد زیر را جایگزین کد های فعلی کنید:

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });

بعد از قرار دادن کد همانند تصویر، دکمه انتشار را بزنید.

قرار دادن کد JS داخل وردپرس

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

در نهایت ظاهر سربرگ به شکل زیر خواهد شد:

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

فهرست مطالب

Avatar
پویا در 16:05

سلام
این اموزش ببنید

پاسخ
مهدی
مهدی در 09:38

سلام
خیلی ممنونم

پاسخ
افشین
افشین در 10:07

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

پاسخ
المنتور فارسی
المنتور فارسی در 12:27

با سلام
لطفا آدرس سایت را ارسال کنید تا بررسی کنیم.

پاسخ
Avatar
علیرضا در 16:32

سلام
در طراحی هدر توسط المنتور وقتی که برای تبدیل منوی متن به منو بار نقطه توقف و یا شکست را تعیین می کنیم صرفا دو عدد قرار گرفته یکی 768 و یکی 1025 می خواستم بدونم چطور میشه این این اعداد را تغییر داد ؟

پاسخ
المنتور فارسی
المنتور فارسی در 17:37

با سلام
از تنظیمات المنتور در پیشخوان وردپرس می توانید این مقادیر را تغییر دهید.

پاسخ
Avatar
محمد در 15:02

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

پاسخ
Avatar
علیرضا در 16:55

سلام
چطور میتونم هدر سایتم رو مثل این سایت درست کنم . https://www.greenweb.ir/
هم شفاف باشه و هم بعد اسکرول کردن به سمت بالا بره و به صورت چسبنده به ابتدای سایت برگرده

پاسخ
المنتور فارسی
المنتور فارسی در 22:24

با سلام
می توانید از آموزش طراحی سربرگ شفاف و چسبنده با المنتور استفاده کنید.

پاسخ
mahdi
mahdi در 17:16

سلام میخواهم اون کد آموزش شفاف را روی این انجام دهم ایا میشود

پاسخ
المنتور فارسی
المنتور فارسی در 17:59

با سلام
بله می تونید استفاده کنید.

پاسخ
Avatar
هادی مهدوی در 12:11

ممنون آموزش های خوبتون.

پاسخ
المنتور فارسی
المنتور فارسی در 13:41

ممنون از همراهی

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید