Скрипт плавающего блока в сайдбаре

Скрипты

Рисунок Скрипт плавающего блока в сайдбаре
Скрипт плавающего блока в сайдбаре Скрипт плавающего блока в сайдбаре
оценка: 5.0 из 5
оценок: 2, отзывов: 4

Для повышения количества кликов по рекламе нужно, чтобы она была постоянно на виду. Если же размещать рекламу по середине страницы в плавающем блоке, то кликов станет много, но пользователей станете терять, и они больше не вернутся. В добавок, за такое от серьезных компаний (таких как Google AdSense и Яндекс Директ) можно пожизненный бан получить. Лучшим решением будет разместить рекламу там, где ему положено - в сайдбаре, а в случае прокрутки страницы держать ее на виду.

Подобную задачу решает данный скрипт плавающего блока в сайдбаре. Конечно же, его можно использовать не только для рекламы. Можно организовать горизонтальное меню, которое размещается под шапкой сайта, а в случае прокрутки вниз зафиксируется в самом верху страницы. Если же прокрутить вверх, то меню "сядет" на свое место под "шапкой".

Скрипт плавающего блока требует наличия подключенного jQuery на сайте, и создан в виде плагина. Я постарался максимально упростить его и сделать более универсальным. Если кто еще не знает, как подключить jQuery к странице, напоминаю. В теле HEAD Вашей страницы нужно разместить код следующего вида:

Code
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>

Также помним, что владельцам сайтов на UCOZ подключать не нужно. Он подключен по умолчанию.

После объявления jQuery нужно подключить сам плагин. Делается это следующим кодом:

Code
<script src="http://szenprogs.ru/scripts/fixedblock.js" type="text/javascript"></script>

Теперь создадим блок, в котором можно разместить рекламный баннер или еще что-нибудь. В теле BODY прописываем следующее:

Code
<div style="width:300px;border:1px solid #f00;height:600px;">
  Тут какой-либо контент
</div>

Остается только запустить скрипт плавающего блока в сайдбаре в работу. Он вызывается следующим образом:

Code
<script type="text/javascript">
  $(window).load(function(){ // ждем загрузки страницы и всех картинок
    $('#block').fixedblock();
  });
</script>

Это был простейший способ вызова. Данная функция также обладает своими параметрами. Синтаксис у нее такой:

Code
$('#block').fixedblock(
  options,
  callbackdown,
  callbackup
);

Параметр options это объект, который может принимать значение {speed: 800}. Это скорость анимации в миллисекундах. Также можно вписывать свои параметры для передачи их callback функциям.

Параметр callbackdown - это функция, которая выполняется каждый раз, когда блок будет доходить до верхней кромки браузера во время прокрутки страницы вниз. Функция может содержать 2 параметра. Первый - это блок, к которому привязана функция fixedblock, второй - это параметры, переданные функции fixedblock.

Параметр callbackup- это функция, которая выполняется каждый раз, когда блок будет возвращаться на свое место во время прокрутки страницы вверх. Функция может содержать 2 параметра. Первый - это блок, к которому привязана функция fixedblock, второй - это параметры, переданные функции fixedblock.

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







Данное плавающее меню создано следующим кодом (в коде пропущено подключение jQuery, но оно нужно):

Code
<style type="text/css">
  #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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Скрипт плавающего блока в сайдбаре
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:29121
Рейтинг:5.0/2
Дата добавления:2014-03-26 21:08, Среда
Добавил:Szen
Теги:jQuery, плавающий блок, Fixed, Плавающий

Мини-форум

№ 02014-03-26 21:08
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт плавающего блока в сайдбаре".
Гость
№ 1
2014-03-30 15:05
romul2006
Аватар участника romul2006
В очередной раз выражаю вам свою
благодарность. Скрипт простой и функциональный. Но прошу и Вашего,Szen,совета.
Я его применил для вертикального подменю и выяснилось, что он "не чувствует" footer. Тупо на него незжает, это раз. Второе - можно ли добавить функцию отключения скрипта (только его) при уменьшении окна браузера до каких-то значений, а то получается совместно с jquery.mobile.customized.min.js меню "наползает" и на контент.
Роман Смирнов
№ 2
2014-03-30 15:06
romul2006
Аватар участника romul2006
http://borprofi.ru/doc.html как то так.
Роман Смирнов
№ 3
2014-03-30 16:48
Szen
Аватар участника Szen
romul2006, ну вот. А я все не мог придумать, какие параметры кроме speed в скриптец напихать. Поразмыслю над предложением.
Szen
№ 4
2016-05-06 14:31
alexjc
Аватар участника alexjc
Цитата Szen
ну вот. А я все не мог придумать, какие параметры кроме speed в скриптец напихать. Поразмыслю над предложением.

придумали? очень не хватает функции "чувствования" футера
alexjc
Учавствовать в обсуждении "Скрипт плавающего блока в сайдбаре" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Ваша оценка дизайна
Всего ответов: 1207
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 10
Гостей: 10
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz