Пускай есть некоторое меню
|
1 2 3 4 5 6 7 8 9 |
<div id="menu"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Joolma</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">HTML5&CSS3</a></li> <li><a href="#">PHP</a></li> </ul> </div> |
Которое мы хотим зафиксировать при прокрутке.
Определим некоторый класс, который будет отвечать за отображение меню при его “прилипании”:
|
1 2 3 4 5 |
#menu.fixed { position:fixed; top:0; left:0; width:100%; } |
Для того, что бы все заработало необходимо добавить скрипт с анализом позиции скролинга:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ var $menu = $("#menu"); $(window).scroll(function(){ if ( $(this).scrollTop() > 100 && !$menu.hasClass("fixed") ){ $menu.addClass("fixed"); } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) { $menu.removeClass("fixed"); } });//scroll }); |
Мы используем событие скролл окна браузера для постоянного отслеживания позиции полосы прокрутки, при данном событии. Написали условия проверки позиции скрола и состояния меню (фиксированное или нет), если мы прокрутили страницу вниз на указанное значение, то появляется фиксированный вариант. Второе условие для смены с фиксированного меню на стандартное.
Несколько улучшений:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
#menu { text-transform: uppercase; text-align: center; line-height: 50px; background: #69c; text-shadow:0 1px 1px black; -moz-border-radius: 5px; -webkit-border-radius:5px; border-radius:5px; } #menu ul { padding:0; margin:0; } #menu li{ display: inline; list-style:none; margin: 5px 10px; } #menu li a { padding:5px 10px; color:#fff; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #menu li a:hover{ background: #36c; color: #ff0; -webkit-transition-property: color, background; -webkit-transition-duration: 0.5s, 0.5s; } .default { width:920px; } .fixed { position:fixed; top:-5px; left:0; width:100%; padding:10px 0; -moz-box-shadow: 5px 5px 20px #333; -webkit-box-shadow: 5px 5px 20px #333; box-shadow: 5px 5px 20px #333; } .transbg { background-color: rgba(60, 130, 190, 0.7)!important; } |
Доработанный код с эффектами:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$(document).ready(function(){ var $menu = $("#menu"); $(window).scroll(function(){ if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){ $menu.fadeOut('fast',function(){ $(this).removeClass("default") .addClass("fixed transbg") .fadeIn('fast'); }); } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) { $menu.fadeOut('fast',function(){ $(this).removeClass("fixed transbg") .addClass("default") .fadeIn('fast'); }); } });//scroll $menu.hover( function(){ if( $(this).hasClass('fixed') ){ $(this).removeClass('transbg'); } }, function(){ if( $(this).hasClass('fixed') ){ $(this).addClass('transbg'); } });//hover });//jQuery |