squitcher
@squitcher
Верстальщик

Как корректно сделать липкий хедер?

Добрый день, имею 2 шапки, одна static, другая прилипающая, проблема в следующем:
при скролле я поставил условие добавления и удаления класса с display none, чтобы скрывать/показывать нужную шапку, но получаю такой вот баг

https://drive.google.com/file/d/1vNUEj14n5YXs7Plf7...

либо посмотреть его можно тут https://codepen.io/true404/pen/abyQRWx как собственно такое фиксить?
  • Вопрос задан
  • 680 просмотров
Пригласить эксперта
Ответы на вопрос 1
Pavel-ww
@Pavel-ww
В целом вообще всё не правильно. Зачем скрывать один Header и запуливать его транслейтом за пределы видимости и показывать другой? Это не только костыль, но и не семантично.

Если нет противопоказаний для position: sticky используйте это, без всяких скриптов.

Если требуется со скриптом и переключение позиционирования, то одному и тому же Header при прокрутке добавляете/удаляете класс sticky например. И там уже, в css пишете для sticky position fixed.

Это базовый принцип. Но при переключении позиционирования будет скачек контента из-за того что Header вылетает из потока при position fixed.
Поэтому, position fixed и всё стиливое оформление надо назначать для внутреннего блока, который должен быть размещен в Header. У самого Header должна быть настроена только высота.

Или добавлять padding-top равный высоте Header когда он получает класс sticky, для блока следующего за ним.
Эти подходы предотвратят скачек контента при скролле
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы