Как при скролле вниз боковую колонку прижать к верхнему краю страницы, а при скролле вниз к нижнему?

Question

[studentLesson]

Всем привет! Есть верстка что-то типо:

<div class="main">
  <div class="main__right-elem">Правый элемент</div>
  <div class="main__elem">Основной контент</div>
</div>

Есть основной элемент и есть правая колонка типо сайдбара. Если зафиксировать правую колонку position: sticky; top: 0 то при скролле вниз колонка будет прижиматься к верху, как и нужно, но и при скролле вверх колонка будет тоже прижиматься кверху. Как можно реализовать такое поведение, чтобы при учёте большой высоты правой колонки:
- при скролле вниз колонка была прижата к верхнему краю страницы своей верхней границей
- при скролле вверх к нижнему своей нижней границей?

Answer 1

[Nikolay Matyushkin]

Intersection Observer
это более чем удовлетворит вашу хотелку, стоит чуток разобраться

Comments

[studentLesson]

Спасибо! пойду разбираться!