Скрипт плавающего блока в сайдбаре
Скрипты
Скрипт плавающего блока в сайдбареДля повышения количества кликов по рекламе нужно, чтобы она была постоянно на виду. Если же размещать рекламу по середине страницы в плавающем блоке, то кликов станет много, но пользователей станете терять, и они больше не вернутся. В добавок, за такое от серьезных компаний (таких как Google AdSense и Яндекс Директ) можно пожизненный бан получить. Лучшим решением будет разместить рекламу там, где ему положено - в сайдбаре, а в случае прокрутки страницы держать ее на виду.
Подобную задачу решает данный скрипт плавающего блока в сайдбаре. Конечно же, его можно использовать не только для рекламы. Можно организовать горизонтальное меню, которое размещается под шапкой сайта, а в случае прокрутки вниз зафиксируется в самом верху страницы. Если же прокрутить вверх, то меню "сядет" на свое место под "шапкой".
Скрипт плавающего блока требует наличия подключенного jQuery на сайте, и создан в виде плагина. Я постарался максимально упростить его и сделать более универсальным. Если кто еще не знает, как подключить jQuery к странице, напоминаю. В теле HEAD Вашей страницы нужно разместить код следующего вида:
Также помним, что владельцам сайтов на UCOZ подключать не нужно. Он подключен по умолчанию.
После объявления jQuery нужно подключить сам плагин. Делается это следующим кодом:
Теперь создадим блок, в котором можно разместить рекламный баннер или еще что-нибудь. В теле BODY прописываем следующее:
Тут какой-либо контент
</div>
Остается только запустить скрипт плавающего блока в сайдбаре в работу. Он вызывается следующим образом:
$(window).load(function(){ // ждем загрузки страницы и всех картинок
$('#block').fixedblock();
});
</script>
Это был простейший способ вызова. Данная функция также обладает своими параметрами. Синтаксис у нее такой:
options,
callbackdown,
callbackup
);
Параметр options это объект, который может принимать значение {speed: 800}. Это скорость анимации в миллисекундах. Также можно вписывать свои параметры для передачи их callback функциям.
Параметр callbackdown - это функция, которая выполняется каждый раз, когда блок будет доходить до верхней кромки браузера во время прокрутки страницы вниз. Функция может содержать 2 параметра. Первый - это блок, к которому привязана функция fixedblock, второй - это параметры, переданные функции fixedblock.
Параметр callbackup- это функция, которая выполняется каждый раз, когда блок будет возвращаться на свое место во время прокрутки страницы вверх. Функция может содержать 2 параметра. Первый - это блок, к которому привязана функция fixedblock, второй - это параметры, переданные функции fixedblock.
Предлагаю интересный пример работы скрипта плавающего блока в сайдбаре с вызовом callback функций и передачей параметров. Это меню, которое будет анимировано при достижении верхней кромки браузера и возвращаться на свое место, при прокрутке страницы обратно. Пример ниже.
Данное плавающее меню создано следующим кодом (в коде пропущено подключение jQuery, но оно нужно):
#fbmenu {
position: relative;
overflow: hidden;
background: #ccc;
}
#fbmenu:after {
content: '';
display: block;
clear: both;
}
#fbmenu ol {
list-style :none;
padding: 0;
margin: 0;
float: left;
position: relative;
left: 50%;
}
#fbmenu ol li {
float: left;
position: relative;
left: -50%;
}
#fbmenu ol li a {
display: block;
text-decoration: none;
background: #55f;
border: 1px solid #00f;
color: #fff;
padding: 5px 10px;
text-align: center;
}
#fbmenu ol li a:hover {
background: #99f;
}
</style>
<div id="fbmenu">
<ol>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ol>
</div>
<script src="http://szenprogs.ru/scripts/fixedblock.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){ // ждем загрузки страницы и всех картинок
$('#fbmenu').fixedblock({ speed: 800 },
function(e, o){
$(e).find('ol').animate({ left: 0 }, o.speed);
$(e).find('ol li').animate({ left: 0 }, o.speed);
},
function(e, o){
$(e).find('ol').animate({ left: '50%' }, o.speed);
$(e).find('ol li').animate({ left: '-50%' }, o.speed);
});
});
</script>
На этом все.
Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Скрипт плавающего блока в сайдбаре
Скрипты
Скрипты, инструкции, справочники
| Категория: | Скрипты |
| Просмотрено: | 124021 |
| Рейтинг: | 3.3/7 |
| Дата добавления: | 2014-03-26 21:08, Среда |
| Добавил: | Szen |
| Теги: | jquery, плавающий блок, Fixed, плавающий |
Рекомендуем
Дополнительно к Скрипт плавающего блока в сайдбаре
Мини-форум
| № 0 | 2014-03-26 21:08 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт плавающего блока в сайдбаре". |
| Гость |
| № 1 | 2014-03-30 15:05 |
romul2006 | В очередной раз выражаю вам свою благодарность. Скрипт простой и функциональный. Но прошу и Вашего,Szen,совета. Я его применил для вертикального подменю и выяснилось, что он "не чувствует" footer. Тупо на него незжает, это раз. Второе - можно ли добавить функцию отключения скрипта (только его) при уменьшении окна браузера до каких-то значений, а то получается совместно с jquery.mobile.customized.min.js меню "наползает" и на контент. |
| Роман Смирнов |
| № 2 | 2014-03-30 15:06 |
| romul2006 | http://borprofi.ru/doc.html как то так. |
| Роман Смирнов |
| № 3 | 2014-03-30 16:48 |
Szen | romul2006, ну вот. А я все не мог придумать, какие параметры кроме speed в скриптец напихать. Поразмыслю над предложением. |
| Szen |
| № 4 | 2016-05-06 14:31 |
| alexjc | Цитата Szen ну вот. А я все не мог придумать, какие параметры кроме speed в скриптец напихать. Поразмыслю над предложением. придумали? очень не хватает функции "чувствования" футера |
| alexjc |
