[X] Помощник

[xsharz Topic Starter]

добрый день, как сделать прилипающий элемент при прокрутке страницы, что надо добавить в данный код?

[mwhide=0]

'top-nav mom_visibility_desktop','container'=> 'ul', 'theme_location' => 'topnav', 'echo' => false )); set_transient( 'top_menu_left'.get_queried_object_id().$lang, $top_menu_left, 60*60*24 ); } echo $top_menu_left; ?>

 

'device-top-nav','container'=> 'ul', 'theme_location' => 'topnav', 'walker' => new mom_topmenu_custom_walker(), 'echo' => false )); set_transient( 'top_mobile_menu_left'.get_queried_object_id().$lang, $top_mobile_menu_left, 60*60*24 ); } echo $top_mobile_menu_left; ?>

'top-nav mom_visibility_desktop','container'=> 'ul', 'theme_location' => 'topnav', 'echo' => false )); set_transient( 'top_menu_right'.get_queried_object_id().$lang, $top_menu_right, 60*60*24 ); } echo $top_menu_right; ?>

 

'device-top-nav','container'=> 'ul', 'theme_location' => 'topnav', 'walker' => new mom_topmenu_custom_walker(), 'echo' => false )); set_transient( 'top_mobile_menu_right'.get_queried_object_id().$lang, $top_mobile_menu_right, 60*60*24 ); } echo $top_mobile_menu_right; ?>

[/mwhide]

[deepsmr]

Если вам нужно что нибудь зафиксировать на сайте, ну, скажем попросту "прибить" меню, элемент и т.д., то вот такой выход есть:

<div id="sup">тут находится любое содержимое, которое нужно вывести поверх всех остальных
           и зафиксировать</div>

и в CSS прописать:

#sup {
position:fixed; 
top:0; left:0; 
z-index:100; 
width:100%; 
height:40px; }

Четко, реально работает. Но своеобразно. Сразу прибивает меню, блок, элемент в фиксированном состоянии

и так и держит.

 

Если нужно фиксировать при прокрутке, то тут масса возможностей тоже. Плагин, например, Q2W3 Fixed Widget

Если без плагина, то вот что об этом пишут на сайте maxborisov.com

 

"Существует множество решений. Да и написать можно самому, если разбираешься в 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 элемент позиционируется относительно документа

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.

Сообщение отредактировал BLIK - 10.9.2015, 16:41

Причина редактирования: подредактировал вставку кода