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

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

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

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

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

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

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

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

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