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