maximus00
6 лет назадКак зафиксировать элемент при прокрутке страницы сайта
Сегодня я расскажу пользователям Голоса интересующихся вебстроительством как можно зафиксировать элемент при прокрутке страницы сайта. Для примера как это работает можете посмотреть на шапку Golos.io:
Ничего сложного в этом нет, поэтому приступим к делу.
Добавляем код блока в HTML-страницу:
<div id="float-block" class="float-block">
<p>Данный блок фиксируется в верхней части экрана при скролле.
Прокрутите страницу вниз…</p>
</div
Теперь нам нужно нициализировать этот блок как плавающий элемент:
var el = document.getElementById('float-block');
scrollFloat.init(el);
В подключаем скрипт для реализации обработку скролла:
var scrollFloat = function() {
'use strict';
var app = {};
app.init = function init(node) {
if (!node || node.nodeType !== 1) {
throw new Error(node + ' is not DOM element');
}
handleWindowScroll(node);
};
function handleWindowScroll(floatElement) {
window.onscroll = function() {
if (window.scrollY > floatElement.offsetTop) {
if (floatElement.style.position !== 'fixed') {
floatElement.style.position = 'fixed';
floatElement.style.top = '0';
}
} else {
if (floatElement.style.position === 'fixed') {
floatElement.style.position = '';
floatElement.style.top = '';
}
}
};
}
return app;
}();
Наша работа завершена. Теперь выбраный элемент при прокрутке будет оставаться в верхней части браузера.