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

js floating block - 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'
                });
            }
        });
js floating block js code image - JS — делаем плавающий блок для рекламы

Настройка и параметры

 // метка на самый нижний блок, после выталкивания которого появится наш блок
//Если наш блок идет последним, то продублировать .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>

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...
VK — Автоматическое принятие всех заявок в друзья
Накопилось больше ста заявок в друзья, а принимать их вручную не хочется из-за неприятной особенности — появляются дополнительные опции и...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *