Фиксированное меню при прокрутке страницы
Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта :)
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наш HTML:
<div id="header">
<div id="navigation">
<ul id="menu">
<li><a href="">Сумки</a></li>
<li><a href="">Обувь</a></li>
<li><a href="">Шарфы</a></li>
<li><a href="">Одежда</a></li>
<li><a href="">Аксессуары</a></li>
</ul>
</div>
</div>
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)
#header {
height: 180px;
}
#navigation{
background: #EF0505;
height: 40px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
font-size: 16px;
line-height: 40px;
position: relative;
top: 140px;
}
#navigation.fixed{
position: fixed;
top: 0;
width: 100%;
background: rgba(239, 5, 5, 0.95);
}
#navigation ul{
width: 1180px;
padding-left: 0;
margin: 0 auto;
display: block;
}
#menu li{
float: left;
list-style: none;
padding: 0 25px;
border-right: 1px solid #D60000;
}
#menu a {
color: #fff;
text-decoration: none;
font-family: Verdana;
}
#menu>li a:hover{
color: #656565;
transition: color 0.5s ease;
}
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
jQuery(function($) {
$(window).scroll(function(){
if($(this).scrollTop()>140){
$('#navigation').addClass('fixed');
}
else if ($(this).scrollTop()<140){
$('#navigation').removeClass('fixed');
}
});
});
Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.
