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

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

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

Демо Скачать

Комментарии