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

В процессе прокрутки страницы сам блок остается неподвижным, однако, положение скролла влияет на развитие некого сценария внутри него. Это могут быть движения персонажей, появление или исчезновение контента, анимации и так далее.
Пример:
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();
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 1
htmlcssphpjs
@htmlcssphpjs
Знаю html, css и js!
Это можно сделать через css через position
block {position: fixed;}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
20 янв. 2021, в 19:59
50000 руб./за проект
20 янв. 2021, в 19:52
1000 руб./в час
20 янв. 2021, в 19:49
55555 руб./за проект