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

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

}();

 

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







Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка