Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
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;
}();

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

0
235.204 GOLOS
На Golos с August 2017
Комментарии (3)
Сортировать по:
Сначала старые