Этот скрипт позволяет добавить на сайт аккуратную промо-полоску в верхней части страницы, не затрагивая существующий дизайн и верстку. Полоска может использоваться для рекламы, уведомлений об акциях, важных объявлений или временных сообщений. Всё настраивается в одном компактном блоке config.

Основные возможности

Полная настройка внешнего вида

Изменяйте цвет фона, текста, кнопки и крестика, высоту полоски и используемый шрифт — без CSS-файлов, прямо в настройках скрипта.

Режим отображения

Работает в двух вариантах:

• fixed — полоска закреплена поверх сайта и остаётся при прокрутке;
• static — отображается перед основным контентом, как часть страницы.

Кнопка с действием

Можно добавить кнопку с произвольным текстом и ссылкой — для перехода на страницу акции, форму или лендинг.

Крестик для закрытия

Пользователь может скрыть баннер, и это действие запоминается через localStorage — после обновления страницы баннер больше не появится, пока не изменится его id.

Адаптивность

Полоска автоматически подстраивается под размер экрана и корректно выглядит на мобильных устройствах.

Плавная анимация появления и скрытия

При загрузке баннер плавно “сползает” сверху, а при закрытии аккуратно исчезает обратно вверх.

Без внешних зависимостей

Работает «из коробки» на чистом JavaScript, без jQuery или сторонних библиотек. Можно вставить на любую страницу, даже в готовую CMS. ✨

Пример применения:

• Уведомить посетителей о распродаже
• Предложить скидку или промокод
• Сообщить об обновлении сервиса
• Разместить ссылку на важную новость или опрос

Преимущества:

• Минимальный вес кода (<5 КБ)
• Полностью автономен
• Легко вставить и удалить без правок в вёрстке
• Подходит для многостраничных сайтов, лендингов и магазинов