Умный плавающий блок (jQuery)

4038 просмотров Alan_Writer 26.01.2017

Демо ▶️

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

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

Установка скрипта

1. Начнем со скрипта. Вставьте его в нижнюю часть сайта, либо прям так, либо в js-файл.
Код
<script>
$(document).ready(function(){
  var $scrollingBanner = $("#block");
  var $footer = $("#footer");
  var $BannerOffsetTop = 0;
  $(window).scroll(function(){
  if($(window).scrollTop() < ($footer.offset().top - 400)) {
  $BannerOffsetTop = $scrollingBanner.offset().top - parseInt($scrollingBanner.css('marginTop'),0) -0;
  if($(window).scrollTop() > $BannerOffsetTop - 0) {
  $scrollingBanner.stop().animate({"marginTop": ($(window).scrollTop() - $BannerOffsetTop + 20) + "px"}, 0);
  } else {
  $scrollingBanner.stop().animate({"marginTop": 20 + "px"},0);
  }
  }
  });
});
</script>

2. Разберем, что и за что в скрипте отвечает, и как подключить его к нужному блоку:
#block - идентификатор блока, который вы хотите сделать плавающим. Задайте нужному блоку уникальный идентификатор, и затем впишите его в скрипт вместо этого.
#footer - идентификатор блока нижней части сайта (футера). Задайте блоку футера уникальный идентификатор, и затем впишите его в скрипт вместо этого.
400 - общая высота блока. Нужно посчитать высоту блока, вместе со всеми отступами и бордюрами, и вписать вместо этого числа.
20 - верхний отступ, то есть высота на которой будет висеть плавающий блок.

Ну вот и все, надеюсь все будет понятно.

Теги: плавающий блок, Smart, Floating block
8 Комментариев
avatar
5
Здравствуйте.
Хочу сделать в сайдбаре плавающими скрипт группы ВКонтакте + один ротатор банеров, чтобы они неразлучно вместе плавали) Подскажите как это все прописать? Ширина сайдбара 314 Спасибо.
avatar
6
А при чем тут ширина. Важна высота блока. Если нужно сделать плавающими 2 блока идущие подряд, их можно объединить в один DIV и уже ему задавать уникальный идентификатор, который потом заносить в скрипт, как и общую высоту блоков.
avatar
7
Честно сказать я в этих прописях (div) пока еще не очень разбираюсь можете пример прописать с двумя блоками ротаторами, если не сложно? Буду очень благодарен.
avatar
8
<div id="block">
Блок-1
Блок-2
</div>
avatar
2
Как вписать правильно блок?
avatar
3
блок никак не нужно особо вписывать, ты просто берешь один из блоков правого или левого контейнера, и прописываешь ему уникальный ИД, типа: id="flyblock1", потом этот идентификатор (#flyblock1) указываешь в скрипте. Ну и дальше в соответствии с инструкцией.
avatar
4
Спасибо большое*
avatar
1
Круто! Отличный и простой скрипт! Спасибо wink