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

Question

[Александр Вербицкий]

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

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

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


А если меню длинное, как в этом случае:

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

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

Вроде доступно объяснил, спасибо!

Comments

[Антон Литвиненко]

Вот я когда-то делал Viche.ck.ua
Оба сайдбар липкие и оба длиннее экрана

Answer 1

[Олег]

Без вычислений на js никак на данный момент.

Comments

[Александр Вербицкий]

Это я и так знаю, вопрос то в том, что "как"?

Answer 2

[Владислав Черненко]

Как альтернатива без JS

max-height:calc(100vh - ваша_шапка_и_отступы);
overflow-y:auto;

Answer 3

[ReActor Дмитрий Вершанский]

Не рассматриваете такой вариант?
Сделать родительский блок сайдбара фиксированным по height и overflow-y: auto - ему же. Таким образом будет расти дочерний блок с элементами меню, а внешний будет оставаться неизменным. При этом, position: sticky будет делать свое дело.