Прилипающее меню или шапка для сайта

Чтобы блок с меню (или шапка сайта целиком) при прокрутке страницы вниз — скрывался, а потом прилипал сверху сайта, нужно присвоив блоку стиль и задать ему свойствоposition: fixed;.

.menu.fixed {
    position: fixed;
    top: 0px;
}

И прописать, код который при прокрутке на несколько пикселей вниз (в нашем случае на 135px) будет блоку со стилем .menu присваивать стиль .fixed.

<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 появляется.

<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>