Оглавление, которое следит за скроллом

MOD-005 МЕНЮ И НАВИГАЦИЯ v1.0 ГОТОВ ✓ ПРОВЕРЕНО 12.08.26

Подсвечивает ссылку на раздел, который сейчас находится в экране.

ТИЛЬДА УМЕЕТ ЭТО САМА

Подсвечивает пункт, чей раздел сейчас на экране: ставит класс t-active, пересчитывает на скролле не чаще раза в 100 мс.

Где это у неё: t_menu__updateActiveLinks и t_menu__highlightNavLinks в tilda-menu-1.0.min.js.

Чего в родной версии нет: Обход заводится от записи блока меню: t_menu__findAnchorLinks берёт rec<id> и селектор этого блока, из него же выводит, какие ссылки считать своими. Список ссылок, собранный не блоком меню — например руками в Zero Block, — в этот обход не попадает.

ГОТОВ · ТЕХНИЧЕСКИЙ КОНТРАКТ

Как устроен мод

ГОТОВ И ПРОВЕРЕН

РЕЗУЛЬТАТ

Подсвечивает ссылку на раздел, который сейчас находится в экране.

КАК ВСТРАИВАЕТСЯ

Готовый файл подключается через блок T123 на странице статьи. Секции назначается класс mk-scrollspy. Настройки передаются в MK_MOD_005; генератор ниже собирает их без ручной правки JavaScript.

ГРАНИЦЫ БЕЗОПАСНОСТИ

Мод меняет только размеченную секцию или явно выбранные элементы и не подменяет отправку форм, оплату либо серверные данные Тильды.
Не переименовывать класс и служебные data-атрибуты после копирования: по ним мод отделяет свой экземпляр от остальных блоков страницы.
После изменения структуры блока повторить опубликованный сценарий из чек-листа, а не ограничиваться просмотром в редакторе.

КРИТЕРИИ ГОТОВНОСТИ

Сборка 1.0 загружается без ошибок и выполняет минимальный пользовательский сценарий на сохранённой странице Тильды; проверено 12.08.26.
Повторная инициализация не создаёт второй экземпляр интерфейса и не ломает соседние стандартные блоки.
Параметры генератора совпадают с meta.json и попадают в код с правильными типами.

ПАРАМЕТРЫ

Заголовки

CSS-селектор разделов с id.

Ссылки оглавления

Ссылки должны вести на id заголовков.

Класс активной ссылки

Отступ сверху 120 px

0 300

КУДА ВСТАВЛЯТЬ: блок T123 на странице статьи

<script src="https://modkod.ru/mk/v1.0/mod-005.js" defer></script>
<script>
  window.MK_MOD_005 = {
    heading: 'h2[id], h3[id]',
    link: 'a[href^="#"]',
    activeClass: 'is-active',
    offset: 120,
  };
</script>

                mk-scrollspy

/* Настройки блока → CSS класс.
   Один класс на секцию — элементы
   внутри мод найдёт сам. */

6.7 КБ ПО СЕТИ · БЕЗ ВНЕШНИХ БИБЛИОТЕК · v1.0 Открыть mod-005.js целиком →

НЕ ХОТИТЕ ЗАВИСЕТЬ ОТ НАШЕГО ДОМЕНА Тот же мод одним куском, 17.8 КБ в блок T123 →

УСТАНОВКА БЕЗ ПРАВКИ JAVASCRIPT

Пять шагов до готовой страницы

v1.0 ЗАКРЕПЛЕНА

01 Подготовьте секцию Откройте настройки нужной секции Zero Block и впишите mk-scrollspy в поле «CSS class name».
02 Добавьте блок T123 блок T123 на странице статьи. Один блок с кодом ставьте один раз на страницу.
03 Скопируйте готовую вставку Код ниже подключает закреплённую версию 1.0; её поведение не изменится само после сдачи сайта.
04 Опубликуйте страницу Проверяйте опубликованный адрес, а не только предпросмотр редактора Тильды.
05 Пройдите приёмку Сборка 1.0 загружается без ошибок и выполняет минимальный пользовательский сценарий на сохранённой странице Тильды; проверено 12.08.26.

Оглавление, которое следит за скроллом

ТИЛЬДА УМЕЕТ ЭТО САМА

Как устроен мод

РЕЗУЛЬТАТ

КАК ВСТРАИВАЕТСЯ

ГРАНИЦЫ БЕЗОПАСНОСТИ

КРИТЕРИИ ГОТОВНОСТИ

ПАРАМЕТРЫ

Пять шагов до готовой страницы

Похожие задачи

Меню, которое схлопывается в точку

Переключатель языковых версий

Проявление текста по скроллу