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

3 года назад
Фиксация блока меню при прокрутке страницы
Фиксация блока меню при прокручивании страницы, что это такое и где применимо? Предположим на вашем сайте содержится большой объем информации, которую необходимо прокручивать в нижнюю часть страницы, при этом важная информация должна оставаться видимой на экране (рекламные баннеры, кнопки прокрутки страницы, разделы сайта). Чтобы реализовать задуманное используются фиксированные блоки. Пользователь, находящийся в любой части страницы, может использовать фиксированный блок как навигацию и переходить на другие страницы. Это очень практично, удобно и современно.
Для фиксации блока на странице используется свойство
Для фиксации блока на странице используется свойство
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,6K
Комментарии
- Qwerty1 год назадposition sticky и готовоОтветить