Речь пойдет о распространенной фиче — фиксации HTML элемента вверху окна браузера, при прокрутке страницы вниз.
Добавьте код блока в HTML-страницу.
<div id="float-block" class="float-block">
<p>Этот блок будет фиксироваться в верхней части экрана при скролле.
Прокрутите страницу вниз…</p>
</div>
Инициализируйте этот блок, как плавающий элемент.
var el = document.getElementById('float-block');
scrollFloat.init(el);
В <head> подключите скрипт, реализующий обработку скролла.
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;
}();
Комментарии к статье: 13
Возможность комментировать эту статью отключена автором. Возможно, во всем виновата её провокационная тематика или большое обилие флейма от предыдущих комментаторов.
Если у вас есть вопросы по содержанию статьи, рекомендуем вам обратиться за помощью на наш форум.