JS — делаем плавающий блок для рекламы

Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип к верху и зафиксировался на месте. Делается элементарно!

Подключение стандартное, как и любого скрипта на 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>