Как зафиксировать блок или меню на сайте

Как сделать на сайте фиксированное плавающее меню или блок.

Существует множество решений. Да и написать можно самому, если разбираешься в JavaScript и jQuery.

Фиксированное верхнее меню на сайте

Наверно, самое изящное и простое решение на jQuery. Код для примера:

$(function(){
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top < 100) $(".floating").css({top: '0', position: 'relative'});
        else $(".floating").css({top: '10px', position: 'fixed'});
    });
});

Этот код нужно вставить в отдельный js-файл или прямо в разметку, обрамив в тег <script>код</script>.

Разберём, что здесь такое. Итак функция $(window).scroll (function () {}); мониторит скроллирование окна. Переменной top присваивается значение отступа прокрутки сверху $(document).scrollTop ();. Далее проверяется, если значение top меньше 100 пикселов, то элементу с классом .floating присваиваются CSS-стили: относительное позиционирование и отступ сверху — 0 пикселов. Если при прокрутке страницы значение top больше или равно 100 пикселам, то элементу .floating присваиваются стили: фиксированная позиция и отступ сверху — 10 пикселов.

Теперь при прокрутке страницы меню всегда будет сверху.

Фиксированное меню в сайдбаре WordPress

Для WordPress существует интересный плагин codeflavors-floating-menu. Его можно установить прямо из админ панели WordPress. Удобный плагин. Работает со стандартными меню сайта. Имеет несколько настроек. Достаточно прост в использовании. На сайте разработчика есть документация по этому плагину.

Если Вы хотите сделать именно плавающее меню на WordPress, то смело используйте этот плагин.

Фиксированный блок/меню в сайдбаре сайта на jQuery

Если Вы хотите сделать не только плавающее меню, но и блок с любым содержанием фиксированным, то для этого Вам потребуется немного модифицировать тот код, который приведён выше.

$(document).ready(function(){
    var br = $.browser;
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top < 61) {
            $("#sidebar").css({top: '0', position: 'relative', marginLeft: '25px'});
        } else if ((!br.msie) || ((br.msie) && (br.version > 7))) {
            $("#sidebar").css({top: '22px', position: 'fixed', marginLeft: '535px'});
        } else if ((br.msie) && (br.version <= 7)) {
            $("#sidebar").css({top: '22px', position: 'fixed', marginLeft: '25px'});
        }
    });
});

Этот код точно такой же, но добавлен стиль margin-left. Это сделано для того, чтобы фиксированный элемент поставить на то место, на котором он должен находится. Дополнительно в данном примере также осуществлена проверка для браузера Internet Explorer 7, т.к. он не корректно обрабатывает значение position: fixed;.

Не забывайте подключать библиотеку jQuery!

Кстати, о библиотеке... Начиная с версии 1.9, jQuery не поддерживает функцию $.browser. Поэтому, чтобы использовать эту конструкцию, можно отдельным файлом подключить эту функцию:

(function() {
 
    var matched, browser;
 
// Использовать jQuery.browser не одобряется.
// Подробнее: http://api.jquery.com/jQuery.browser
// jQuery.uaMatch поддерживается для совместимости
jQuery.uaMatch = function( ua ) {
        ua = ua.toLowerCase();
 
        var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
            /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
            /(msie) ([\w.]+)/.exec( ua ) ||
            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
            [];
 
        return {
            browser: match[ 1 ] || "",
            version: match[ 2 ] || "0"
        };
    };
 
    matched = jQuery.uaMatch( navigator.userAgent );
    browser = {};
 
    if ( matched.browser ) {
        browser[ matched.browser ] = true;
        browser.version = matched.version;
    }
 
// Chrome is Webkit, but Webkit is also Safari.
    if ( browser.chrome ) {
        browser.webkit = true;
    } else if ( browser.webkit ) {
        browser.safari = true;
    }
 
    jQuery.browser = browser;
 
    jQuery.sub = function() {
        function jQuerySub( selector, context ) {
            return new jQuerySub.fn.init( selector, context );
        }
        jQuery.extend( true, jQuerySub, this );
        jQuerySub.superclass = this;
        jQuerySub.fn = jQuerySub.prototype = this();
        jQuerySub.fn.constructor = jQuerySub;
        jQuerySub.sub = this.sub;
        jQuerySub.fn.init = function init( selector, context ) {
            if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
                context = jQuerySub( context );
            }
 
            return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
        };
        jQuerySub.fn.init.prototype = jQuerySub.fn;
        var rootjQuerySub = jQuerySub(document);
        return jQuerySub;
    };
})();

Фиксированный блок в сайдбаре WordPress

Ещё одна альтернатива, но гораздо более эффективная: jQuery-плагин hcsticky.

Имеет много настроек, но, в то же время, достаточно прост в использовании.

Первым делом подключаем jQuery и сам плагин:

<!-- jQuery -->

<script type="text/javascript" src="jquery.js"></script>

<!-- hcSticky script -->

<script type="text/javascript" src="jquery.hcsticky.js"></script>

Затем для элемента, который должен быть плавающим, вызываем метод:

$('#sidebar').hcSticky();

Всё. Теперь блок будет плавающим.

Этот плагин очень полезен особенно в том случае, если Вы хотите зафиксировать высокий блок. Но при прокрутке он не должен вылезать за дозволенные пределы, например наползать на футтер.

Если использовать варианты, которые были описаны выше, то блоки/меню будут наползать на низ сайт, особенно, когда последний имеет большую высоту.

В плагине hcsticky предусмотрена возможность, так сказать, останавливать плавающий блок на определённом расстоянии от низа сайта. Пример:

$(document).ready(function() {
    $('#sidebar').hcSticky({
        top: 25,
        bottomEnd: 155,
        noContainer: true
    });
});

Где:

• top — отступ от верха окна браузера во время прокрутке
• bottomEnd — отступ от нижней границы сайта, когда сайт прокручен до самого низа
• noContainer — при значении true элемент позиционируется относительно документа