Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Плавающий блок без плагинов

При создании сайта обычно уделяют внимание его оформлению, создают удобную структуру страниц, разграничивая место для контента, навигации и рекламы. Но не нужно забывать и позаботиться о том, чтобы определенные элементы были доступны для посетителя постоянно. Наверняка вы видели на различных ресурсах отдельный блок, который следует (плавает) за пользователем по всей странице при ее прокрутке и постоянно находится на виду.

плавающий блок, фиксированный блок, плавающий виджет, плавающий сайдбар

В плавающем блоке можно разместить различный контент в виде текста или картинки, видео ролика или баннера. Все это реклама, кликабельность по которой заметно улучшается за счет постоянного нахождения на виду- перед глазами посетителя, что может привести к увеличению дохода.  Вот такой плавающий блок мы с вами и реализуем.

Как сделать плавающий блок

Если ваш сайт работает на CMS WordPress, то данный блок можно реализовать при помощи плагина Q2W3 Fixed Widget, но он имеет ряд недостатков, а в частности не работает в некоторых шаблонах.

Мы с вами установим плавающий блок на свой сайт не используя никаких плагинов, а реализуем все при помощи кода. Наш блок разместится в сайдбаре сайта и будет плавать за пользователем при прокрутке страницы и тем самым постоянно находиться на виду.

Для создания нашего блока необходимо создать текстовый виджет и поместить в него нужный контент, или в файле sidebar.php разместить следующий код:

<div id=»floatblock» class=»widget»> (Ваш контент) </div>

Определите сами место, куда вы вставите данный код. А для того, чтобы наш блок начал плавать по странице, необходимо в фале footer.php в конце кода перед закрывающимся тегом вставить код скрипта:

<script type=»text/javascript»>// <![CDATA[
if (typeof(jQuery) == 'function') {
$j = jQuery.noConflict();
var $float_block = $j('#floatblock');
var $float_bottom = $j('#footer');
var sdb_float_fixtop = 5;
var float_bottom_limit = $float_bottom.offset().top-20;
setTimeout(function(){ float_bottom_limit = $float_bottom.offset().top-20; }, 2000); // Пересчитаем спустя время
var float_top_init = $float_block.offset().top;
var sdb_float_position = $float_block.position();
var float_block_height = $float_block.height()+sdb_float_fixtop;
var sdb_move_last = false;
var float_lift = 0; // поднимает блок, когда он упирается во float_bottom
var float_lift_complete = false;
$j(window).bind('scroll resize', function () {
if (float_bottom_limit - float_top_init - float_block_height < 100) return; var sdb_move = ($j(window).scrollTop() > float_top_init - sdb_float_fixtop);
if (sdb_move) {
float_lift = float_bottom_limit - $j(window).scrollTop() - (float_block_height-sdb_float_fixtop);
if (float_lift < 0) { $float_block.css('top', float_lift); float_lift_complete = true; }
// когда поднимать не надо, устанавливается начальное значение верхнего отступа
else if (float_lift_complete) { $float_block.css('top', sdb_float_fixtop); float_lift_complete = false; }
}
if (sdb_move_last != sdb_move) {
sdb_move_last = sdb_move;
if (sdb_move) {
$float_block.css({'position':'fixed', 'top':sdb_float_fixtop});
} else { $float_block.css('position', 'static'); }
}
});
$j(window).scroll();
}
// ]]></script>

Далее нам нужно немного настроить параметры нашего блока. В строке «6» задайте расстояние от верхней границы до плавающего блока- укажите значение на свое усмотрение. Все остальное, что вам нужно, имеет комментарии.

На этом все. Теперь вы можете устанавливать плавающий блок на любой ваш ресурс и при этом, не используя никаких плагинов, что снижает нагрузку на сервер и экономит ваше время и средства.

Как вам статья? Оставьте свой комментарий, а если возникнут трудности –пишите свои вопросы ниже в комментариях и я постараюсь Вам помочь.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ