Чтобы блок с меню (или шапка сайта целиком) при прокрутке страницы вниз — скрывался, а потом прилипал сверху сайта, нужно присвоив блоку стиль и задать ему свойство position: fixed;.
|
1 2 3 4 |
.menu.fixed { position: fixed; top: 0px; } |
И прописать, код который при прокрутке на несколько пикселей вниз (в нашем случае на 135px) будет блоку со стилем .menu присваивать стиль .fixed.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> jQuery(window).scroll(function() { var the_top = jQuery(document).scrollTop(); if (the_top > 135) { jQuery('.menu').addClass('fixed'); } else { jQuery('.menu').removeClass('fixed'); } }); </script> |
Так можно создавать дополнительный блок со свойством display: none; а при достижении прокрутки до определенного расстояния появляться. Таким образом можно создать разные шапки, основную и дополнительную (минимальную), которая будет прилипать при скролле сайта вниз.
В Oxygen есть настройка для хедера, чтобы он показывался при прокрутке вниз. Но у него нет функции, чтобы на мобильных устройствах при прокрутке вниз он не показывался, а когда мы листаем вверх, то он появлялся. Для это я в настройках хедера в редакторе Oxy выставляю для него skicky всегда, и добавляю в сниппет код JS и CSS. Где при прокрутке вниз добавляется стиль, который скрывается, а при прокрутке вверх он удаляется, соответственно header появляется.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script> // добавляем класс при прокрутке вниз, а вверх он не добовляется var headerVisible = true; var scrollPos = jQuery(document).scrollTop(); jQuery(window).scroll(function() { var scrollTop = jQuery(document).scrollTop(); if(headerVisible && scrollTop > scrollPos) { headerVisible = false; jQuery('.oxy-sticky-header').addClass('chm-sticky-header-hidden'); } else if(!headerVisible && scrollTop < scrollPos) { headerVisible = true; jQuery('.oxy-sticky-header').removeClass('chm-sticky-header-hidden'); } scrollPos = scrollTop; }); </script> <style> @media only screen and (max-width: 769px) { .oxy-sticky-header-active.oxy-sticky-header-fade-in.chm-sticky-header-hidden { display:none; } } </style> |
