Инициализация

const dh = new DynamicHeader(".header", {
  menuLink: "header__menu-link",
  modules: ["ScrollWatch"],
  scrollWatch: true,
});

ScrollWatch - это модуль, который улучшает взаимодействие пользователя с веб-страницами. Он автоматически подсвечивает элементы в меню в зависимости от того, какая часть страницы отображается на экране.

Использование

Для работы модуля необходимо указать идентификатор целевой секции в HTML-коде страницы. В ссылке, которая должна приводить к этой секции, используйте атрибут href, начиная со знака #, и указывая идентификатор нужной секции.

<section id="hero"></section>
<a class="header__menu-link" href="#hero">hero</a>

Параметры

menuItemActive

По умолчанию: "active"

Класс, который будет присвоен активному элементу меню, когда "scrollWatch" включен.

scrollEventTimeout

По умолчанию: 900

При использовании якорных ссылок в качестве навигации, модуль ScrollWatch временно отключает событие "scroll" для целевой якорной ссылки и восстанавливает его через указанное время.

Демонстрационная секция

Демонстрационная секция