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

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


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

Подключение стандартное, как и любого скрипта js — создаем файл.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
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>


Понравилась статья "JS — делаем плавающий блок для рекламы" из раздела Веб разработка » JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 246   Дата: 21-дек-2017, 01:22

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика