Изменение плашки меню (хедера) очень востребованная функция. Сам по себе код простой, поэтому я уверена, что вы справитесь.😊
Описание примера
В этом примере показано, как использовать события, чтобы сохранить заголовок и изменить его внешний вид, когда пользователи прокручивают ваш сайт. Чтобы задать изменение нашей шапке, мы будем использовать две полоски — с прозрачным фоном и с белым фоном.
Настройте прозрачную полосу, добавив необходимые вам элементы. Как только эта полоса будет создана, продублируйте ее и измените цвет фона на белый. Перетащите каждую полосу в шапку сайта.
Шаги по созданию динамичного хедера:
Откройте пример в редакторе, чтобы работать с шаблоном;
Откройте свой сайт и добавьте 2 полоски в шапку сайта с необходимыми элементами и 1 прозрачную полоску под шапку. Она будет выполнять роль условия (если мы скроллим вниз, то шапка сайта видоизменяется);
Добавьте код на страницу сайта.
Код для сайта | Код для страницы |
// For full API documentation, including code examples, visit http://wix.to/94BuAAs $w.onReady(function () { // Uncomment these lines to make this interaction works across all pages // Be aware to run this code only once, or from the page code, or from the site code // To make this Code work in all of your site pages, // Move these lines into the the 'Site Code' panel on the left // $w("#headerTransitionAnchor").onViewportLeave(() => { // $w("#whiteHeader").show(); // }) // $w("#headerTransitionAnchor").onViewportEnter(() => { // $w("#whiteHeader").hide(); // }) }); | $w.onReady(function () { // To make this Code work in all of your site pages, // Move these lines into the the 'Site Code' panel on the left $w("#headerTransitionPoint").onViewportLeave(() => { $w("#scrollingHeaderStrip").show(); $w("#defaultHeaderStrip").hide(); }) $w("#headerTransitionPoint").onViewportEnter(() => { $w("#defaultHeaderStrip").show(); $w("#scrollingHeaderStrip").hide(); }) }); |