Как сделать такой липкий sidebar?

Question

[Александр Рыбаков]

Добрый день.

Есть оранжевый блок с раскрывающимися списками. Поэтому высота его не определена.
Если мы скроллим вниз, блок фиксится на уровне красной линии.


Если мы скроллим вниз и оранжевый блок (списки раскрыты) превышает высоту между красной и зеленой линией, то оранжевый блок прилипает к зеленой линии


Если мы скроллим вверх и оранжевый блок (списки раскрыты) превышает высоту между красной и зеленой линией, то оранжевый блок прилипает к красной линии


надо чтобы блок плавно, параллельно скроллу перемещался

Надеюсь, понятно объяснил задачу, как такое реализовать?
Заранее спасибо

Comments

[Rustam Bainazarov]

JS. Такого поведения только на CSS и position: sticky/fixed не добиться.

Answer 1

[hzzzzl]

держи

Comments

[Александр Рыбаков]

Добрый день, спасибо огромное. Возможно я забыл сказать, что если блок большой, то при скроле надо не просто прикреплять, но и скроллить как бы вместе со страницей. плавность должна быть. Я уже решил эту проблему таким способом — на каждый скролл я через транслейтY перемещал вверх и вниз но так, чтобы этот блок не уезжал за эти линии. Спасибо тебе говорю, за "e.wheelDelta". По скольку каждый скролл я сравнивал с предыдущим и таким образом отлавливал сколько пикселей и в какую сторону прокрутили. Спасибо большое!!! Буду знать, чем получать wheel delta

Answer 2

[Mikhail Rerberg]

Достаточно будет css свойства 'position: sticky'

https://developer.mozilla.org/ru/docs/Web/CSS/position

Comments

[Дмитрий Киреев]

https://caniuse.com/#search=position%3A%20sticky - если IE не нужен то конечно да.

[Виталий Першин]

Дмитрий Киреев, Там и без ie проблем хватает...

Answer 3

[Дмитрий Киреев]

hc-sticky или если есть время и желание - пишем скрипт, в котором мы можем по событию скролл измерять расстояние к верху видимой области - исходя из чисел уже делать калькуляции. Задачка не очень сложная, но нужно будет дебажить и учитывать ресайзы, разные типы устройств, тестировать - если есть какие-то сроки - воспользуйтесь любым готовым решением.