Как зафиксировать секцию пока не проскроллится ее контент?

Question

[Иван Медведев]

Привет всем! Есть задача:
- зафиксировать секцию вверху окна браузера, а ее контент при этом должен скроллиться. Как только контент закончился, секция должна продолжить скролл дальше.

Пример кода и того, что пробовал:

<section style="height: 100vh;position: sticky; top: 0;">
  <div class="container" style="overflow: scroll;">
    Контент по высоте больше чем 100vh
  </div>
</section>

Comments

[ThunderCat]

Вроде такое только через жс, отслеживаем низ внутреннего контейнера на пересечение контента с контейнером, меняем стики на абсолют, ну и дальше по желанию чего куда должно там крутиться. Гораздо интереснее как должен вести себя контейнер когда в нем контент пойдет вниз... Обратно стики прыгать или крутиться до начала а потом задать стики?

[Иван Медведев]

ThunderCat, я вот и пытаюсь отследить конец скролла элемента и добавить класс на липкий элемент. И уже через класс хочу менять позициирование. Только вот не срабатывает почему-то условие. Ниже код:

let scrollElem = document.getElementsByClassName('scroll');
function scrolled() {
    if (scrollElem.offsetHeight + scrollElem.scrollTop === scrollElem.scrollHeight) {
        document.getElementsByClassName('ag_b6').classList.add('static');
    };
}
scrolled();

Что не так?

[ThunderCat]

Иван Медведев, первое что не так - это отслеживать скролл (что само по себе не айс, на каждый скролл вызывать обработчик), вместо создания интерсекшн обсервер, тогда внизу контента можно добавить элемент, по пересечению с которым отслеживать окончание скролла контента.

[Николай]

https://codelibrary.opendatasoft.com/components/st...