Чтобы его создать, нужно изначально знать, на какой высоте находится блок относительно верха в начальный момент времени. Эту координату можно задать как статически, так и динамически.
Как пример мы зафиксируем блок fixblock, который будет находится на определенном расстоянии от верха. Для осуществления нам понадобится следующий код
$(function() {
var fixblock_height = $('#fixblock').height(); // определяем высоты фиксированного блока
var fixblock_pos = $('#fixblock').position().top; ; // определяем его первоначальное положение
$(window).scroll(function(){
if ($(window).scrollTop() > fixblock_pos){ // Если страницу прокрутили дальше, чем находится наш блок
$('#fixblock').css({'position': 'fixed', 'top':'0px', 'z-index':'10'}); // То мы этот блок фиксируем и отображаем сверху.
$('#head').css('padding-bottom', fixblock_height+'px'); // А чтобы это было плавно, добавляем отсуп снизу для верхнего блока (как будто этот блок там все еще есть)
}else{ // Если же позиция скрола меньше (выше), чем наш блок
$('#fixblock').css({'position': 'static'}); // то возвращаем все назад
$('#head').css('padding-bottom', '0px'); // И убираем отступ
}
})
});
его нужно поместить перед закрывающимся
</head>
HTML код будет иметь примерно следующий вид:
<div id="head"></div> <div id="fixblock"> <div class="block-body"> Меню или другие блоки </div> </div> <div id="list"> <div class="content"> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> контент<br /><br /><br /> </div> </div>
ну и стили CSS:
#head{
width:100%;
clear:both;
background: #dbdbdc;
height:70px;
}
#list{
margin:0px auto;
width:1000px;
}
.content{
width:800px;
float:left;
height:2000px;
color: #8b939c;
font-size:30px;
}
#fixblock{
width:100%;
height:50px;
padding-bottom:18px;
}
#fixblock .block-body{
width:100%;
height:45px;
padding-top: 5px;
background: #9d252f;
text-align:center;
color: #fff;
}
Если все сделано правильно, то ваш фиксированный блок будет радовать вас и посетителей вашего сайта.
