На многих сайтах реализовано плавающее боковое меню. В сегодняшней статье я покажу, как это можно сделать. Причем плавать боковое меню будет лишь только при скроллинге страницы. Данный эффект можно реализовать, используя свойство css position со значением fixed, однако для лучшего эффекта воспользуемся возможностями jQuery.
HTML-разметка
Код
<header>
<!-- "шапка" сайта -->
</header>
<div id="wrap">
<div id="sidebar">
<!-- содержимое правой боковой колонки -->
</div>
<div id="container">
<!-- содержимое основного контейнера -->
</div>
</div> <!-- end wrap -->
CSS
Код
header {
width: 100%;
height: 100px;
background: #d7d53f;
}
#wrap {
width: 600px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 200px;
background: #c2b3c6;
margin-left: -220px;
}
Ну а вот перед вами и сам скрипт. Вы можете добавить его к себе непосредственно в файл, вставив его между тегами script, или занесите его в ваш общий файл с javascript кодом, если таковой имеется. Все предельно просто и я думаю, вам не составит никакого труда, при желании, реализовать плавающий боковой блок на своем сайте.
Код
$(document).ready(function(){
//ф-я offset возвращает координаты отн-но начала страницы
var sidebartop = $('#sidebar').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > sidebartop )
{ // ф-я scrollTop() возвращает величину вертикального скроллинга
$('#sidebar').css({position: 'fixed', top: '30px'});
}
else
{
$('#sidebar').css({position: 'static'});
}
});
})
