Фиксация блока меню при прокрутке страницы

Фиксация блока меню при прокрутке (скроллинге) страницы вниз.

Фиксация блока меню при прокрутке страницы
11 месяцев назад

Фиксация блока меню при прокрутке страницы

Фиксация блока меню при прокручивании страницы, что это такое и где применимо? Предположим на вашем сайте содержится большой объем информации, которую необходимо прокручивать в нижнюю часть страницы, при этом важная информация должна оставаться видимой на экране (рекламные баннеры, кнопки прокрутки страницы, разделы сайта). Чтобы реализовать задуманное используются фиксированные блоки. Пользователь, находящийся в любой части страницы, может использовать фиксированный блок как навигацию и переходить на другие страницы. Это очень практично, удобно и современно.

Для фиксации блока на странице используется свойство
position: fixed;
В данном примере реализована фиксация блока меню при прокрутке страницы вниз на определенное количество пикселей.
content.htm
<div id="default-theme-menu">
    <div id="menu_block" class="container"></div>
</div>
style.css
html,body {
    background: #f0eee0;
    margin: 0;
    padding: 0;
    height: 2500px;
}

#default-theme-menu {    
    display: block;
    height: 90px;
}

.menu-fixed {    
    position: fixed;
    top:0;
    left:0;
    right: 0;
    width: 100%;
    z-index: 5;
    border-bottom: 1px solid #efefef;
    background: #fff;
}

#menu_block {  
    display: table;
    width: calc(100% - 30px);
    height: 50px;
    background: #f84644;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 65px auto;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}
fixed.js
$(window).scroll(function(){
    var sticky = $('#default-theme-menu'),
        scroll = $(window).scrollTop();

    if (scroll >= 170) sticky.addClass('menu-fixed');
    else sticky.removeClass('menu-fixed');
 
});
697
Демо Скачать
Комментарии

    ×
    Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.