Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Прилипающее меню

#1 xsharz

xsharz
  • Пользователь
  • 2 сообщений
  • Репутация: 0
0

Отправлено 04 Сентябрь 2015 - 11:58

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

 

Внимание
Чтобы увидеть этот текст Вам необходимо авторизоваться


 

 

  • 0

#2 deepsmr

deepsmr
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 10 Сентябрь 2015 - 15:35

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

<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 элемент позиционируется относительно документа

Сообщение отредактировал BLIK: 10 Сентябрь 2015 - 15:41
подредактировал вставку кода

  • 0


Оформление форума – IPBSkins.ru