Задать вопрос
@HealSpirit

Проблема выпадения из потока прилипающего меню?

https://dimanik94.github.io
Суть вопроса: в момент, когда скролл доходит до меню его позиционирование меняется со static на fixed, тем самым происходит выпадению меню из потока документа и нижестоящие элементы занимают освободившееся пространство. Но занимают они это место рывком, что выглядит некрасиво.
Как решить эту проблему? В момент, когда меню меняет позиционирование, нижестоящим элементам ставить margin или padding, равный высоте меню? Есть какие-то варианты?
К примеру на сайте SAMSUNG реализовано, такое же меню, но такого рывка нету, причем код, как я думаю не сильно отличается: https://www.samsung.com/ru/cooking-appliances/comp...
  • Вопрос задан
  • 165 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
@codemafia
Самоотвод
На сайте samsung высота блока .product-anchor-nav-nonprice-jsWrap, в который вложено меню, закостылено прямо в верстку страницы. Это неправильно, хотя и работает.
В вашем случае можно или обернуть .nav дополнительным тегом, при прокрутке динамически задавать высоту блока и добавлять класс для .nav, или использовать трансформацию, которая будет задавать смещение меню от начальной точки .nav до window.pageOffsetY.
Еще рекомендую добавить will-change для .nav.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы