Изменение шапки сайта при скроллинге страницы

Обновлено: 18 янв.

Изменение плашки меню (хедера) очень востребованная функция. Сам по себе код простой, поэтому я уверена, что вы справитесь.😊


Пример (смотреть с ПК) >



Описание примера


В этом примере показано, как использовать события, чтобы сохранить заголовок и изменить его внешний вид, когда пользователи прокручивают ваш сайт. Чтобы задать изменение нашей шапке, мы будем использовать две полоски — с прозрачным фоном и с белым фоном.


Настройте прозрачную полосу, добавив необходимые вам элементы. Как только эта полоса будет создана, продублируйте ее и измените цвет фона на белый. Перетащите каждую полосу в шапку сайта.


Шаги по созданию динамичного хедера:

  1. Откройте пример в редакторе, чтобы работать с шаблоном;

  2. Откройте свой сайт и добавьте 2 полоски в шапку сайта с необходимыми элементами и 1 прозрачную полоску под шапку. Она будет выполнять роль условия (если мы скроллим вниз, то шапка сайта видоизменяется);

  3. Добавьте код на страницу сайта.

​Код для сайта

​Код для страницы

// 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(); }) });

Видео-инструкция по созданию динамичной шапки





271 просмотр0 комментариев

Недавние посты

Смотреть все