ModuleMarket

МОДУЛИ
ШАБЛОНЫ
ECOMMERCE
МОДИФИКАЦИИ
FAQ
Закрыть

Модификация «Умное» меню для Tilda

100,00
р.
В корзину
Описание
Характеристики
Код
Инструкция по установке
Условия оплаты и доставки

Описание

Меню автоматически будеть скрываться когда листаете страницу вниз и возвращаться когда листаете вверх.
Очень удобно когда шапка занимает много места и её нужно временно скрыть.

Характеристики

CMS: Tilda

Назначение: Модификация

Совместимость: jQuery

Код

<style>
.uc-menu-on-scroll {
position: fixed;
top: -100px; /*Высота меню*/
z-index: 9999;
width: 100%;
transition: all 0.3s ease-out; /*Время появления меню*/
}
</style>

<script>
var menu_elem = $(document.body).find('.uc-menu-on-scroll');

//Расстояние от верха страницы, при котором меню скрывается в обязательном порядке
let triggerScroll = 500;

let lastScroll = 0;

$(document).scroll(function() {
const currentScroll = $(this).scrollTop();
if (currentScroll > lastScroll || currentScroll < triggerScroll) {
// down
menu_elem.css('top', '-100px'); //Высота меню
}
else if (currentScroll < lastScroll) {
// up
menu_elem.css('top', '0');
}
lastScroll = currentScroll;
});
</script>

Инструкция по установке

Шаг 1.
Задайте блоку с меню класс uc-menu-on-scroll

Шаг 2.
Добавьте в блок Т123 код, заменив в нем значения:

🔹 Высота вашего меню заменяется в строчках
top: -100px;
и
menu_elem.css('top', '-100px');

🔹 Расстояние в рх от верха страницы, при котором меню скрывается в обязательном порядке, т.е. как только вы поднимитесь по странице выше, чем указанное значение, меню скроется:
let triggerScroll = 500;

🔸 Для работы кода убедитесь, что у вас подключена библиотека jQuery (Настройки сайта → Еще → Галочка «Подключить jQuery на страницах сайта»)

🔸 Если вы хотите, чтобы меню было видно с самого начала, поставьте следующие значения:
top: 0px;
и
let triggerScroll = 0;

🔸 Если вам нужно применить скрипт на два меню (например, для десктопа и телефона), просто присвойте им обоим класс uc-menu-on-scroll и задайте им видимость для разных диапазонов разрешений, они не будут никак мешать друг другу. Высоту сдвига поставьте как у самого высокого меню.

🔸 Фиксировать меню настройками Тильды не нужно, иначе код не сработает.

🔸 Если у вас меню в автоскейле, поставьте значение высоты в коде примерно раза в два больше, чем само меню.

Условия оплаты и доставки

Оплата производится через сервис YooMoney. После оплаты вы сможете отслеживать статус заказа в личном кабинете в течение 24 часов. Все лицензии, модули, шаблоны и прочие цифровые товары доставляются исключительно на электронную почту, указанную при оформлении заказа.
Если в течение длительного времени после оплаты сообщение с заказом не приходит, пожалуйста, обратитесь в нашу службу поддержки по электронной почте sales@module-market.shop.
Вам может понравиться
Made on
Tilda