В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован отдельный компонент шапки сайта и его плагины
Расположение компонента
Файлы компонента находятся в папке src/components/layout/header, здесь вы найдете JS-файл для написания логики компонента, HTML-файл с базовым кодом, SCSS-файл для стилизации компонента.
Также в папке src/components/layout/header/plugins присутствуют плагины компонента
Использование компонента
Подключите HTML-файл компонента на свою страницу с помощью <include> (подключено по умолчанию).
Использование плагинов
Плагин «Scroll»
Позволяет управлять классами, которые добавляются <header> во время скрола. Для подключения добавьте дата-атрибут data-fls-header-scroll к тегу <header>:
<header data-fls-header data-fls-header-scroll class="header">...</header>Теперь, при скроле более одного пикселя к шапке будет добавляться класс —header-scroll
Для управления количеством прокрученных пикселей перед добавлением класса, добавьте дата-атрибута data-fls-header-scroll значение:
<header data-fls-header data-fls-header-scroll="500" class="header">...</header>Также можно подключить функционал «исчезающей» шапки для улучшения юзабилити сайта, для этого добавьте дата-атрибут data-fls-header-scroll-show к тегу <header>:
<header data-fls-header data-fls-header-scroll data-fls-header-scroll-show class="header">...</header>Теперь шапка будет исчезать при скроле вниз и появляться через 500ms паузы. Для управления паузой добавьте значение дата-атрибута data-fls-header-scroll-show:
<header data-fls-header data-fls-header-scroll data-fls-header-scroll-show="1000" class="header">...</header>При необходимости изменить стилизацию плагина «Scroll» используйте файл src/components/layout/header/plugins/scroll/scroll.scss