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

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

2 года назад

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

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

Для фиксации блока на странице используется свойство

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');
 
});

2,2K

Демо Скачать

Комментарии

Qwerty1 год назад
position sticky и готово
Ответить