Компоненты
Header
Компонент шапки состоит из двух частей: burger.js - отвечает за работу бургера, sticky-header.js - отвечает за работу прилипающего меню и за смену тем в меню при необходимости.
Вся стилизация происходит от родителя(header-example), при открытии бургера на него вешается класс is-open.
Для прилепающего меню родителю добавлен модификатор header-example--sticky.
Смена темы в шапке происходит так же за счёт добавления модификаторов к родителю.
Для корректной работы бургер меню родителю необходимо добавить атрибут data-header, а бургеру data-burger.
Открытие меню происходит по клику на бургер. Закрытие по клику на бургер, по нажатию на клавишу esc, а так же по клику на элемент с дата атрибутом data-close-menu
Переключение по табу зациклено в шапке при открытии меню. Важно что бы меню находилось внутри шапки.
Для работы стики шапки в атрибут data-header необходимо прописать значение data-header="sticky", помимо этого должны быть подготовлены и стили, js не делаю шапку фиксированной, он лишь управляет её поведением при необходимости бэкскроле и смены тем.
В стики шапке, вы, так же можете прописать дата атрибут data-hide-point="number", number - это число, которое отвечает за то, на каком растоянии скрола шапка должна исчезать, если атрибут не поставить шапка будет скрываться сразу при начале скрола.
Для смены тем в шапке при скроле, на секции над которыми будет меняться тема шапки нужно расставить дата атрибуты data-header-theme-class="mod", mod - это модификатор для шапки который будет вешаться на неё при доскроле к необходимой секции. Важно что бы данный дата атрибут был прописан на всех секциях подряд.