Меню — Липучка для темы: GeneratePress

Приятная во всех отношениях Тема «GeneratePress». Но возникла необходимость немного улучшить интерфейс. При вертикальном скролинге страницы, горизонтальное Меню должно оставаться в верхней части окна.

Решено было обойтись без Плагинов.

В Дочернюю Тему, копируем файл: header.php из оригинальной Темы.
Вносим изменения:

... стр.11

if( wp_is_mobile() ){
	// Если это мобильное устройство
	$Mobile = 1;
} else {
	$Mobile = 0;
}

if ( is_user_logged_in() ) {
 // Коррекция Липкого Меню, если Пользователь залогинен. (Ну не Пользователь, а Админ или типа того.)
 $MenuBar_Correction = 1;
} else {
 $MenuBar_Correction = 0;
}

... стр.28
<head>
 ...
</head>

<script>
 // Делаем липкое Меню.
 jQuery(document).ready(function(){
 var Mobile = <?php echo $Mobile;?>;
 var MenuBar_Correction = <?php echo $MenuBar_Correction;?>;
 var stickyHeaderTop = jQuery('#site-navigation').offset().top;
 var window_scrollTop;
 var AdminBar_H = 0;
 var AdminBar_Position;
 var MaxWidth_Content = jQuery('#site-navigation').css('max-width'); 
 MaxWidth_Content = parseInt(MaxWidth_Content, 10); 
 
 if (Mobile == 1) {
 // Не используем Липучку для мобильных устройств, т.к. раскрытое меню может выйти за нижнюю границу экрана.
 return;
 } 
 
 // Реагируем на Скрол
 jQuery(window).scroll(function(){
 RepositionMenu ();
 });
 
 // Реагируем на Изменения размера экрана
 jQuery(window).resize(function(){
 RepositionMenu ();
 });
 
 function RepositionMenu () {
 // Делаем Меню-Липучку, если есть на то условия.
 window_scrollTop = jQuery(window).scrollTop();
 
 if (MenuBar_Correction == 1) {
 AdminBar_Position = jQuery('#wpadminbar').css('position');
 
 if (AdminBar_Position == 'fixed') {
 // Коррекция позиции Липкокого Меню, если Пользователь залогинен и AdminBar фиксирован (зависит от ширины).
 AdminBar_H = jQuery('#wpadminbar').height();
 }
 }
 var Top_Sticky = AdminBar_H + 'px'; 
 
 if( window_scrollTop > stickyHeaderTop ) {
 // Липучка ON
 var Width_Menu = jQuery('#site-navigation').width();
 
 if (Width_Menu < MaxWidth_Content) {
 jQuery('#site-navigation').css({
 position: 'fixed', 
 width: '100%', 
 top: Top_Sticky,
 left: '0px'
 }); 
 } else {
 jQuery('#site-navigation').css({
 position: 'fixed', 
 width: '100%', 
 top: Top_Sticky,
 left: 'calc((100% - ' + MaxWidth_Content + 'px)/2)'
 }); 
 }
 } else {
 // Липучка OFF
 jQuery('#site-navigation').css({
 position: 'relative',
 left: '0px',
 top: '0px'
 });
 } 
 }
 }); 
</script>

Собственно говоря, на этом все.
В результате, у нас получается следующее: Как только начинаем прокручивать страницу вниз, и горизонтальное Меню доходит до верхней части окна, то оно — это Меню прилипает и остается на своем месте при дальнейшей прокрутке.
Прокручивая страницу вверх, как только мы достигаем позиции изначального расположения горизонтального Меню, то оно снова отлипает и двигается вместе с контентом страницы.

Предложенный вариант отлично справляется с ситуацией, когда ширина контента ограничена и окно может быть и шире и уже заданных ограничений.

Для мобильных устройств (не путать с просто узким экраном, вручную сдвинутым), поведение иное. Скрипт просто отключается и Меню ведет себя как обычно.
Это сделано для того, чтобы избежать ситуаций, когда количество пунктов и под-пунктов в Меню при его раскрытии превышает размер экрана (как правило в горизонтальном расположении) и пользоваться таким интерфейсом становится неудобно.

WordPress Gear

Меню — Липучка для темы: GeneratePress

Меню — Липучка для темы: GeneratePress: 1 комментарий

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