Как сделать, чтобы некоторый блок, сопоставимый с размерами окна, фиксировался относительно видимой области страницы?

Question

[dc65k]

В процессе прокрутки страницы сам блок остается неподвижным, однако, положение скролла влияет на развитие некого сценария внутри него. Это могут быть движения персонажей, появление или исчезновение контента, анимации и так далее.
Пример:
https://www.sber.ru/salute/smartmarket/dev/?_ga=2....
Мне известно, что есть различные библиотеки, реализующие данный функционал, но я пытаюсь понять, как без их использования реализовать базовую вещь. Например, на странице уже есть определенное количество контента, мы начинаем скролить, справа визуально скролл идет вниз, а страница не скролится до определенного условия.
Я предполагаю, что необходимо сделать возможность прокрутки до определенной позиции, но вопрос с точки зрения синтаксиса как это сделать?

class App {
    constructor() {
        this.init();
    }

    init() {
        window.addEventListener('scroll', this.onScrollDocumentHandler)
    }

    onScrollDocumentHandler = (event) => {
        // console.log(pageYOffset);

        let windowRelativeTop = document.documentElement.getBoundingClientRect().top;
        console.log(windowRelativeTop);

        // let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
        // console.log(windowRelativeBottom);
    }
}

const app = new App();

Comments

[RAX7]

https://scrollmagic.io/examples/basic/simple_pinni...

Answer 1

[Всеволод html]

Это можно сделать через css через position
block {position: fixed;}