Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип к верху и зафиксировался на месте. Делается элементарно!
Подключение стандартное, как и любого скрипта на JavaScript — создаем файл *.js, подключаем на сайт следом за подключением jQuery и помещаем в него следующий код:
var float_mark = $('.fsb-mark');
var offset = float_mark.offset();
var left = offset.left;
var top = offset.top;
var width = $('.floating-block').width();
var height = $('.floating-block').height();
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if (scrollTop >= top) {
$('.floating-block').css({
left:left+'px',
position:'fixed',
top:"10px",
width:width+"px"
});
} else {
$('.floating-block').css({
position:'static'
});
}
});
Настройка и параметры
// метка на самый нижний блок, после выталкивания которого появится наш блок
//Если наш блок идет последним, то продублировать .floating-block
var float_mark = $('.fsb-mark');
//наш блок, которому задается фиксация
var width = $('.floating-block').width();
var height = $('.floating-block').height();
// JQuery-объект с CSS стилями
$('.floating-block').css({
left:left+'px',
position:'fixed',
top:"10px",
width:width+"px"
});
// Можно заменить строку выше на готовый CSS-класс, где classname = .classname{}
$('.floating-block').addClass('classname');
HTML-разметка
Тут все еще проще. Ничего переделывать и изменять не нужно. На плавающий блок мы вешаем нужный класс, а на последний еще один класс, как метку. Если ее не повесить, блок будет перекрывать все блоки сайдбара при условии, что он находится выше!
<div class="sidebar-menu floating-block">
<div class="sidebar_head">Интересное</div>
<div class="textwidget">
<!-- НАШ блок, который должен плавать идет первым в блоке сайдбара -->
</div>
</div>
<div class="sidebar-menu">
<div class="sidebar_head">Еще блок</div>
<div class="textwidget">
<!-- тут еще какой-то блок -->
</div>
</div>
<div class="sidebar-menu">
<div class="sidebar_head">Еще блок</div>
<div class="textwidget">
<!-- тут еще какой-то блок -->
</div>
</div>
<div class="sidebar-menu fsb-mark">
<div class="sidebar_head">Последний блок</div>
<div class="textwidget">
<!-- вешаем метку, которую отловит JS и подставит
.floating-block; с position:fixed; -->
</div>
</div>
Комментарии