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>

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Комментарии

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