Вертикальный скролл в JavaScript

Иногда бывает нужно отслеживать как пользователь скроллит страницу.

Например, Вы можете отслеживать скролл вниз для того чтобы поднять баннер до верха страницы и держать его там.

А если пользователь открутит страницу к самому верху - вернуть баннер в исходное положение.

Если Вы читаете эту статью с достаточно широкого экрана, то можете увидеть подобный баннер справа.

Впервые я сделал такой баннер для сайта HeiHei.ru

Нужно воспользоваться

window.addEventListener('scroll', () => { const scrolled = window.scrollY;

Задача - найти элемент с классом rightBanner. Я заранее знаю, что он будет один, но в целом это не важно.

'use strict' let rb = document.getElementsByClassName('rightBanner'); /* Находим элементы с классом rightBanner */ let rightBannerElement = rb[0]; /* Нам нужен первый, к тому же он единственный */ window.addEventListener('scroll', () => { const scrolled = window.scrollY; if (scrolled >= 340) { rightBannerElement.style.position='fixed'; rightBannerElement.style.top='50px'; } /* Зафиксировали баннер после того */ /* как пользователь отскролил вниз */ else if (scrolled < 340) { rightBannerElement.style.position='absolute'; rightBannerElement.style.top='480px'; /* Вернули обратно, никаких хитростей */ /* в современных браузерах придумывать не нужно */ });

• Search this site
• aofeed - Telegram channel to follow new articles
• aofeedchat - ask a question in the Telegram group