Как зафиксировать элемент при прокрутке страницы сайта

Сегодня я расскажу пользователям Голоса интересующихся вебстроительством как можно зафиксировать элемент при прокрутке страницы сайта. Для примера как это работает можете посмотреть на шапку 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;
}();

Наша работа завершена. Теперь выбраный элемент при прокрутке будет оставаться в верхней части браузера.

сайтостроениеэлементсайтыcmsблогиupvotebot
258
235.203 GOLOS
0
В избранное
maximus00
На Golos с 2017 M08
258
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (3)
Сортировать по:
Сначала старые