Motiva
Мои коллекции
← каталог

Banner Sticky

Липкая полоса-объявление с закрытием, которое запоминается. Ответ «закрыт?» берётся ленивым инициализатором состояния — до первого кадра, поэтому при повторном заходе баннер не мигает и страница не дёргается на его высоту.

cssclickscrollintermediate0reduced-motion ✓
↗
↕ демо длиннее кадра — прокрутите его

Редактируемые поля

Секция «banner». Весь контент приходит пропсами — ниже то, что конструктор даст поправить, не трогая код.

ПропЧто этоТип
labelПлашка слеваtext
textТекст объявленияrichtext
ctaLabelСсылка — подписьtext
ctaHrefСсылка — адресlink
closeLabelПодпись крестика (для скринридера)text

Все пропсы

Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.

ПропТипПо умолчаниюЧто это
label?string"Обновление"Короткая надпись слева (формат «Обновили тарифы»).
text?string"Тарифы пересчитаны: команды до пяти чел…
ctaLabel?string"Что изменилось"
ctaHref?string"#"
storageKey?string"motiva:banner-sticky"Ключ в localStorage. Разные баннеры — разные ключи, иначе закрытый прячет следующий.
remember?booleantrueЗакрытие запоминается между заходами. false — только на текущую сессию страницы.
closeLabel?string"Закрыть объявление"Подпись к крестику для скринридера (формат «Закрыть объявление»).
background?ReactNode—Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`. Занят — секция снимает собственную заливку, чтобы не спорить за слой.

Установка

npx shadcn@latest add https://motiva.pages.dev/r/banner-sticky.json
Что нужно в проекте до установки
  1. components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
  2. Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
  3. Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
  4. Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
  5. Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

"use client";

import type { ReactNode } from "react";
import { useState } from "react";

export interface BannerStickyProps {
  /** Короткая надпись слева (формат «Обновили тарифы»). */
  label?: string;
  text?: string;
  ctaLabel?: string;
  ctaHref?: string;
  /** Ключ в localStorage. Разные баннеры — разные ключи, иначе закрытый прячет следующий. */
  storageKey?: string;
  /** Закрытие запоминается между заходами. false — только на текущую сессию страницы. */
  remember?: boolean;
  /** Подпись к крестику для скринридера (формат «Закрыть объявление»). */
  closeLabel?: string;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом (формат «0.5»); 0 — выключить. */
  scrim?: number;
}

/**
 * Хранилище в песочнице БРОСАЕТ, а не возвращает null. В iframe со строгой политикой хранения
 * и в приватном окне обращение к `localStorage` кидает SecurityError на самом обращении —
 * без try/catch падает весь остров, и вместо баннера остаётся пустое место и красная консоль.
 * Превью каталога живёт в iframe, так что это не гипотетический случай.
 */
const read = (key: string) => {
  try {
    return localStorage.getItem(key) === "1";
  } catch {
    return false;
  }
};
const write = (key: string) => {
  try {
    localStorage.setItem(key, "1");
  } catch {
    /* закрытие останется в пределах сессии — это лучше, чем упасть */
  }
};

/**
 * Липкая полоса-объявление: держится у верхней кромки, закрывается крестиком и больше
 * не возвращается.
 *
 * Главное здесь — то, чего НЕ видно: при повторном заходе баннера нет уже на ПЕРВОМ кадре.
 * Наивная версия читает хранилище в эффекте, то есть после первой отрисовки: баннер успевает
 * нарисоваться, страница дёргается на его высоту и он исчезает — ровно то мигание, из-за
 * которого закрытие кажется не сработавшим. Здесь ответ «закрыт?» получен ленивым
 * инициализатором состояния, до первого кадра, и закрытый баннер не попадает в DOM вовсе.
 * (В SSR тот же вопрос решается инлайн-скриптом в `<head>`, который ставит атрибут на
 * `<html>` до первой отрисовки: на сервере хранилища нет, и честного ответа взять негде.)
 *
 * Закрытие по клику, наоборот, анимируется — но не высотой в пикселях, которую неоткуда
 * взять (текст переносится на две строки на телефоне), а `grid-template-rows: 1fr → 0fr`:
 * строка едет ровно на свою высоту, какой бы она ни была. Из DOM полоса уходит по окончании
 * перехода, а не сразу, иначе анимировать было бы уже нечего.
 */
export function BannerSticky({
  label = "Обновление",
  text = "Тарифы пересчитаны: команды до пяти человек теперь платят как один человек.",
  ctaLabel = "Что изменилось",
  ctaHref = "#",
  storageKey = "motiva:banner-sticky",
  remember = true,
  closeLabel = "Закрыть объявление",
  background,
  tone,
  scrim = 0.5,
}: BannerStickyProps) {
  // ленивый инициализатор: вопрос к хранилищу задаётся ДО первого кадра, а не в эффекте
  const [state, setState] = useState<"open" | "closing" | "gone">(() =>
    remember && typeof window !== "undefined" && read(storageKey) ? "gone" : "open",
  );

  if (state === "gone") return null;

  const close = () => {
    if (remember) write(storageKey);
    const reduced =
      document.documentElement.hasAttribute("data-shot") ||
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    setState(reduced ? "gone" : "closing");
  };

  return (
    <section
      className="bsk"
      data-state={state}
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--bsk-scrim" as string]: scrim }}
      // строка схлопнулась — только теперь узел можно убрать
      onTransitionEnd={(e) => {
        if (e.propertyName === "grid-template-rows" && state === "closing") setState("gone");
      }}
      aria-label="Объявление"
    >
      <style>{`
        /* Липнет САМА секция, а не полоса внутри неё: контейнер липкости — родитель, и полоса
           внутри секции держалась бы только пока сама секция в кадре, то есть один экран. */
        .bsk { position: sticky; top: 0; z-index: 30; isolation: isolate; width: 100%;
          display: grid; grid-template-rows: 1fr;
          transition: grid-template-rows var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
          background: var(--ds-accent-soft, oklch(0.72 0.16 300 / 0.1));
          border-bottom: 1px solid var(--ds-border, oklch(0.3 0.02 275));
          color: var(--ds-fg, oklch(0.95 0.01 265));
          font-family: var(--ds-font, system-ui, sans-serif);
          backdrop-filter: blur(10px); }
        .bsk[data-state="closing"] { grid-template-rows: 0fr; border-bottom-color: transparent; }
        /* 0fr режет строку, только если содержимое согласно быть обрезанным */
        .bsk-clip { overflow: hidden; min-height: 0; }

        .bsk-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
          padding: 10px var(--ds-gutter, clamp(18px, 5vw, 54px));
          display: flex; align-items: center; gap: var(--ds-3, 12px); flex-wrap: wrap; }
        .bsk-label { flex: none; padding: 3px 9px; border-radius: var(--ds-radius-pill, 999px);
          background: var(--ds-accent, oklch(0.78 0.16 300));
          color: var(--ds-accent-fg, oklch(0.16 0.02 275));
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); font-weight: 600; letter-spacing: 0.03em; }
        .bsk-text { margin: 0; flex: 1 1 16ch; min-width: 0;
          font-size: var(--ds-text-sm, 0.86rem); line-height: 1.45; }
        .bsk-cta { flex: none; text-decoration: none; white-space: nowrap;
          font-size: var(--ds-text-sm, 0.86rem); font-weight: 600;
          color: var(--ds-accent, oklch(0.78 0.16 300));
          border-bottom: 1px solid var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35));
          transition: border-color var(--ds-fast, 0.18s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
        .bsk-cta:is(:hover, :focus-visible) { border-bottom-color: var(--ds-accent, oklch(0.78 0.16 300)); }

        /* 32px — минимальная тач-цель; крестик мельче попадается только мышью */
        .bsk-x { flex: none; margin-left: auto; width: 32px; height: 32px; display: grid;
          place-items: center; padding: 0; border-radius: var(--ds-radius-sm, 8px);
          background: transparent; border: 1px solid transparent; cursor: pointer;
          color: var(--ds-muted, oklch(0.72 0.02 265)); font-size: 15px; line-height: 1;
          transition: color var(--ds-fast, 0.18s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      border-color var(--ds-fast, 0.18s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
        .bsk-x:is(:hover, :focus-visible) { color: var(--ds-fg, oklch(0.95 0.01 265));
          border-color: var(--ds-border, oklch(0.3 0.02 275)); }

        /* СОКЕТ ФОНА. Слой на z-index -1 внутри своего stacking context: поверх заливки
           секции, но под содержимым — вёрстке полосы знать о нём не нужно. */
        .bsk-bg { position: absolute; inset: 0; z-index: -1; }
        .bsk[data-slot-bg] { background: transparent; backdrop-filter: none; }
        .bsk-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
        .bsk[data-tone="dark"] { --ds-fg: oklch(0.96 0.01 265); --ds-muted: oklch(0.84 0.02 265);
          --ds-border: oklch(0.98 0.01 265 / 0.16); color: var(--ds-fg); }
        .bsk[data-tone="dark"] .bsk-bg::after {
          background: oklch(0.09 0.02 265 / calc(var(--bsk-scrim, 0.5) * 0.9)); }
        .bsk[data-tone="light"] { --ds-fg: oklch(0.2 0.02 265); --ds-muted: oklch(0.42 0.02 265);
          --ds-border: oklch(0.2 0.02 265 / 0.14); color: var(--ds-fg); }
        .bsk[data-tone="light"] .bsk-bg::after {
          background: oklch(0.99 0 0 / calc(var(--bsk-scrim, 0.5) * 0.9)); }

        @media (prefers-reduced-motion: reduce) {
          .bsk, .bsk-cta, .bsk-x { transition: none; }
        }
      `}</style>

      {background && <div className="bsk-bg">{background}</div>}

      <div className="bsk-clip">
        <div className="bsk-in">
          {label && <span className="bsk-label">{label}</span>}
          <p className="bsk-text">{text}</p>
          {ctaLabel && (
            <a className="bsk-cta" href={ctaHref}>
              {ctaLabel}
            </a>
          )}
          <button className="bsk-x" type="button" onClick={close} aria-label={closeLabel}>
            <span aria-hidden="true">✕</span>
          </button>
        </div>
      </div>
    </section>
  );
}

Похожие эффекты

вариант
Nav Stickyreact
вариант
CTA Splitreact
вариант
Footer CTAreact
Comparison Tablereact
Nav Blendreact
Timeline Railreact
лицензия: MITавтор: Motivaисточник: оригинал (Motiva)v1.0.0