/ Сайтостроение / Дизайн / Фиксированное меню 2.0

Фиксированное меню 2.0

29.04.2016

703

Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение.

Верстка фиксируемого блока

<div id="stick_menu" class="default">

В отличие от предыдущей версии меню, перед блоком ставить ничего не нужно.

Стили для фиксированного блока

#stick_menu.default {float:left; width:100%; list-style:none;}

#stick_menu.fixed {
position:fixed;
top:0; left:0;
width:100%;
z-index: 200;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.5);
}

Скрипт фиксированного меню

jQuery скрипт для функционирования фиксированного меню. Данный код нужно поместить в конструкцию $(document).ready.

if($("div").is("#stick_menu")) {	

var $menu = $("#stick_menu");
             
        $(window).scroll(function(){
            if ( $(this).scrollTop() > 300 && $menu.hasClass("default") ){
                $menu.fadeOut('fast',function(){
                    $(this).removeClass("default")
                           .addClass("fixed")
                           .fadeIn('slow');
                });
            } else if($(this).scrollTop() <= 300 && $menu.hasClass("fixed")) {
                $menu.fadeOut('fast',function(){
                    $(this).removeClass("fixed")
                           .addClass("default")
                           .fadeIn('fast');
                });
            }
        });
		
}

!Только слою #stick_menu не нужно ставить свойства сглаживания эффектов

-webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

Еще один альтернативный способ

Еще один простой способ прилипания шапки

// Прилипание шапки
$(document).ready(function () {
        var objToStick = $("#head-order");
        var topOfObjToStick = $(objToStick).offset().top; //Получаем начальное расположение нашего блока
        $(window).scroll(function () {
            var windowScroll = $(window).scrollTop(); //Получаем величину, показывающую на сколько прокручено окно
            if (windowScroll > topOfObjToStick) { // Если прокрутили больше, чем расстояние до блока, то приклеиваем его
                $(objToStick).addClass("topWindow");
            } else {
                $(objToStick).removeClass("topWindow");
            };
        });
});

Только в случае именно для шапки сайта, вот это значение надо приравнять 0 (либо установить какой-либо отступ от верха). Если этого не сделать, при перезагрузке страницы с середины, прилипание будет работать с этого места.

var topOfObjToStick = 0;

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Автоматическое меню, оглавление, измененное состояние меню

Автоматическое меню, оглавление, измененное состояние меню

Меню с изменяемым состоянием может применяться для различных задач, в т.ч. для меню лэндинга или для оглавления длинной страницы. Такое меню состоит из хэш-ссылок для перемещения по самой странице. Смысл Читать далее »

Меню для мобильной версии

Меню для мобильной версии


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Делаем простую адаптацию меню под мобильную версию, превращая в иконку, при нажатии на которую меню раскрывается. Трансформируем меню в иконку Стандартный код вывода меню <nav id="topmenu" role="navigation"> <?php wp_nav_menu( array( Читать далее »

/
Манипуляции с меню

Манипуляции с меню

Проводим различные эксперименты и манипуляции с меню. Добавить пункт функцией Добавляем произвольный пункт меню при помощи функции (!данный пример будет работать только с установленным плагином woocommerce) add_filter( 'wp_nav_menu_items', 'my_account_loginout_link', 10, Читать далее »

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

Пока нет комментариев. Будь первым!

Фиксированное меню 2.0
Изменить стиль карты Google Map
Рекомендации для васИзменить стиль карты Google MapOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.