VerbAlexVlad
@VerbAlexVlad
Программист-любитель

Как правильно сделать липкое меню при прокрутке страницы (без js, думаю ни как)?

Попытаюсь объяснить =)

Есть меню с категориями товаров, располагается в блоке "aside", нужно, чтобы при прокрутке вниз, оно прилипало к верхней части экрана, провернуть это можно с помощью "position: sticky".

Но есть проблема, это хорошо прокатит в том случае, если меню не большое, и полностью помещается в область экрана
6039deae7c699062137986.jpeg

А если меню длинное, как в этом случае:
6039df6f0b94a293316861.jpeg
то при прокрутке, происходит фиксация, но нижняя часть меню не доступна для пользователя, пока он не закончит прокручивать всю страницу вниз, в зависимости от длины блока "main"

Вопрос, как фиксировать это меню так, чтобы если оно не длинное, фиксировалось по верхней границе, а если длинное то фиксация происходила при совпадении нижней границы меню с нижней границей экрана?

Вроде доступно объяснил, спасибо!
  • Вопрос задан
  • 192 просмотра
Пригласить эксперта
Ответы на вопрос 3
@lolzqq
HTML,CSS,JS,PHP
Без вычислений на js никак на данный момент.
Ответ написан
vladchv
@vladchv
WordPress Developer
Как альтернатива без JS
max-height:calc(100vh - ваша_шапка_и_отступы);
overflow-y:auto;
Ответ написан
HunteR-VRX
@HunteR-VRX
Помешанный на развитии
Не рассматриваете такой вариант?
Сделать родительский блок сайдбара фиксированным по height и overflow-y: auto - ему же. Таким образом будет расти дочерний блок с элементами меню, а внешний будет оставаться неизменным. При этом, position: sticky будет делать свое дело.
Ответ написан
Ваш ответ на вопрос

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

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