سربرگ دوم چسبان در المنتور، سربرگ ها توی صفحه های هر سایتی از جایگاه ویژه ای برخوردان. سربرگ ها علاوه بر اینکه منوی سایت رو دارن و کاربر رو به قسمت های مختلف سایتمون هدایت می کنن، میتونن اطلاعات برند ما مثل شماره تماس، لوگو و سایر اطلاعات رو با خودشون به همراه داشته باشن. بنابراین ممکنه که نیاز باشه چندین منو رو همزمان در یک صفحه از سایتمون داشته باشیم. بنابراین گاهی اوقات ممکنه که نیاز داشته باشین که علاوه بر داشتن یک هدر(سربرگ)، سربرگ دومی داشته باشین که هنگام اسکرول کاربر در صفحه تون، از یه جایی به بعد سریرگ اول مخفی بشه و از یه جایی به بعد سربرگ دوم به عنوان هدر صفحه به کاربر نمایش داده باشه. به همین خاطر جالبه که بدونیم با چه ترفندی می تونیم سربرگ دوم چسبان در المنتور رو ایجاد کنیم. توی این مقاله از سایت کنترل وب، میخوایم با استفاده از چند خط کد ساده سی اس اس و المتور پرو، ساخت سربرگ دوم چسبان در المنتور رو آموزش بدیم تا با داشتن سربرگ دوم چسبان در المنتور، منویی به جز منوی اول رو در هنگام اسکرول صفحه، به کاربر نمایش بدین.
برای ساخت سربرگ دوم چسبان در المنتور در قدم اول، باید دو تا سربرگ خودمونو در دو بخش مجزا زیر هم طراحی کنیم. برای این کار دو بخش(section) زیر هم میسازیم و هر کدوم از سربرگ ها رو به سلیقه خودمون توی هر کدوم از این بخش ها طراحی می کنیم.
بعد از اینکه این سربرگ ها رو در المنتور ایجاد کردیم،با انتخاب سربرگ دوم، بر روی ویرایش بخش میزنیم.
برای اینکه میخوایم قابلیت موردنظر رو با استفاده از کد سی اس اس ایجاد کنیم، در این مرحله باید نامی رو به عنوان نام کلاس سی اس اس، به بخش مورد نظر اختصاص بدیم تا در کد سی اس اس که در ادمه براتون قرار میدیم، بتونیم که قابلیت موردنظر رو روی بخش مربوطه اعمال کنیم. برای این کار در منوی ویرایش بخش، در بخش پیشرفته،قسمت کلاس های سی اس اس(css)، مقدار second-header رو اختصاص میدیم.
در قدم بعدی، کد های سی اس اسی که در ادمه براتون قرار می دیم رو، در قسمت پیشرفته، سی اس اس سفارشی(custom css) قرار بدین.
در قدم بعدی برای اینکه منوی دوم حالت چسبنده رو به خودش بگیره ، در قسمت پیشرفته همین بخش منوی دوم، قسمتی به نام موشن افکت(motion effect) وجود داره که در این قسمت یک قابلیتی به نام sticky وجو داره که با تنظیمات اون میتوین کاری کنین که قسمت موردنظر حالت چسبندگی رو به المان های صفحه پیدا کنه. برای اینکه می خوایم در قسمت بالای صفحه سربرگ دوممون نمایش داده بشه، بنابراین این مقدار رو روی Top تنظیم می کنیم.
در نهایت برای قدم اخر برای تکمیل طراحی، باید کاری کنیم که هدر دوم خاصیت مخفی شوندگی رو پیدا کنه تا وقتی که صفحه رو تا قسمت بالای صفحه اسکرول کردیم،هدر دوم مخفی بشه و فقط هدر اول رو داشته باشیم. برای اینکار در قسمت پیشرفته، در قسمت موشن افکت، قسمتی به نام effects offset وجود داره که با تنظیم اون به مقدار مناسب میتونین کاری کنین که دقیقا در لحظه ای که صفحه به سمت بالا اسکرول میشه و به سربرگ اول می رسیم، سربرگ دوم مخفی بشه.با توجه به طراحی ما، عدد 60px برای این قسمت مناسبه. باید توجه داشته باشین که این عدد باید با عددی که در قسمت top قسمت second-header اومده برابر باشه.
وقتی که کاربر صفحه رو به سمت پایین اسکرول میکنه، به خاطر اینکه سربرگ اول خاصیت چسبندگی رو نداره و با بقیه المان های صفحه اسکرول میشه و به پایین میره، در هنگام پایین اومدن صفحه، هدر اول رو دیگه نداریم و فقط هدر دوم ظاهر میشه و وقتی به بالا بر می گردیم به خاطر خاصیتی که در مرحله قبلی به هدر دوم دادیم، هدر بالا مخفی بشه و هدر اول رو داشته باشیم.
به همین راحتی! در چند مرحله تونستیم سربرگ دوم چسبان در المنتور رو به وجود بیاریم.امیدوارم این مطلب براتون مفید بوده باشه و تونسته باشیم یه قدم شما رو به طراحی ایده آل خودتون نزدیک تر کرده باشیم.
قطعه کد سی اس اس:
.second-header{
top: -60px!important;
z-index: -1;
transition: top 0.3s ease,opacity 0.3s ease !important;
opacity: 0;
}
.second-header.elementor-sticky--effects{
top: 0!important;
z-index: 1!important;
opacity: 1;
}
