🏠 | 💻 PC | Программирование | JS |

Вертикальный скролл в 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'; /* Вернули обратно, никаких хитростей */ /* в современных браузерах придумывать не нужно */ });

Статьи о JavaScript
Программирование на JavaScript
Сортировка массива
Определить ширину экрана
Определить тип элемента
Mocha Framework - тестирование JavaScript
TicTacToe
Ошибки
Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@eth1.ru если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети: