Фиксация элемента при прокрутке страницы

12 комментариев

Речь пойдет о распространенной фиче — фиксации 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;
}();

Посмотреть демо.

После регистрации реклама на сайте отображаться не будет.
Обсудите статью на форуме.

Комментарии к статье: 12

Подождите, загружаются комментарии...

Оставить комментарий

Если не хотите больше вводить капчу — создайте аккаунт.

Предпросмотр комментария

Ваш комментарий пуст.