Простой плавающий блок на jQuery

  В последнее время на сайтах и в блогах стало популярным размещать фиксированный или правильнее сказать, плавающий блок, в который можно поместить меню, форму подписки или другую информацию, которая должна быть обязательно на виду. Суть в том, что такой блок изначально расположен как обычный элемент, но при прокрутке фиксируется и движется вместе со всей страницей, оставаясь видимым.
  В общем-то меня эта тема не обошла стороной, и решил я сделать себе плавающие меню, с помощью jQuery и этого самого фиксированного блока. И вот менюшка "плавает", как и задумывалось, и теперь пришло время поделится тем, как просто и быстро сделать такой плавающий блок со смещением у себя на сайте или в блоге.
  В принципе, простой фиксированный блок возможно реализовать и только при помощи CSS - свойства position со значением fixed, но тогда он изначально будет намертво определен в заданной точке на мониторе посетителя и "плавающим", его будет назвать проблематично. Нам же нужен блок, который смещается и фиксируется лишь при прокрутке страницы.
  Чтобы было понятнее смотрим:
DEMO
  Сразу замечу, что вариантов реализации в сети достаточно, но действительно толковых не много. Большинство обладают громоздким, часто не нужным, кодом, а некоторые не совсем и универсальны. Данный вариант самый простой, без анимаций и прочего - немного CSS и совсем немного jQuery.
HTML будет выглядит так:

  <div class="floating">
   <!--Тут содержимое блока-->
  </div>

  Теперь CSS. Сразу добавим и новый класс, у которого позиционирование зададим как fixed:

.floating {
 background: #1c1c1c;
 color: #fff;
 font: normal normal 14px Tahoma;
 padding: 10px;
 width: 300px; /*указываем ширину*/
}
.fixed {
 position: fixed;
 top: 10px; /*здесь указываем отступ сверху*/
 z-index: 9999; /*устанавливаем блок поверх всех элементов на странице*/
}

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

  А вот и сам скрипт jQuery. Его задача проста - когда страница прокручена до определенной высоты добавить класс и зафиксировать блок.

$(function(){
 $(window).scroll(function() {
  var top = $(document).scrollTop();
  if (top > 200) $('.floating').addClass('fixed'); //200 - это значение высоты прокрутки страницы для добавления класс
  else $('.floating').removeClass('fixed');
 });
});

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

05.12.2013
  - Изменен код скрипта: добавлена переменная начальной позиции плавающего блока от окна браузера, для упрощения внедрения скрипта.

$(function(){
 var topPos = $('.floating').offset().top; //topPos - это значение от верха блока до окна браузера
 $(window).scroll(function() {
  var top = $(document).scrollTop();
  if (top > topPos) $('.floating').addClass('fixed');
  else $('.floating').removeClass('fixed');
 });
});

25.10.2013
  Дополнение статьи по часто задаваемым вопросам:
  - Как убрать "скачок" контента вверх когда блок получает фиксированное позиционирование.
  - Как сделать чтобы на сайте с фиксированной шириной, при прокрутке, блок не выходил за границы родительских блоков или оставался в пределах своей колонки.
  - Дополнение скрипта чтобы плавающий блок не "наезжал" на другие блоки и "подвал"(футер) сайта, останавливался или исчезал при их достижении.
  /*--------------*/
  Добавлены два файла HTML с исходным кодом, которые вы можете скачать по прямой ссылке тестировать, использовать и изменять по своему усмотрению.

  На демонстрационной странице в начале статьи показан первый вариант скрипта, без доработок.

Как убрать смещение контента, когда блок становится плавающим

  Изначально, пока блок не стал плавающим, он имеет относительное позиционирование и полностью участвует в структуре веб-страницы, т.е. своими размерами, в частности высотой, влияет на положение других блоков сайта. Когда же в процессе прокрутки блок приобретает, с помощью скрипта, фиксированное позиционирование, то он выпадает из общей структуры и контент или блоки, которые находились ниже, сразу занимают освободившиеся место. Такой "скачек", естественно, не совсем приятен для разработчика и совсем не приятен для посетителя. Решается данная проблема очень просто, на уровне HTML и CSS.
 Решение:
  Необходимо код плавающего блока обернуть в дополнительный контейнер:

 <div class="container">
  <div class="floating">
   <!--Тут содержимое блока-->
  </div>
 </div>

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

.floating {
 background:#1c1c1c;
 color:#fff;
 font: normal normal 14px Tahoma;
 padding: 10px;
 margin: 5px;
 height: 500px;
 width: 300px;
}
.container {
 height: 530px; /*высота блока + отступы*/
}

  В результате, пока блок будет спокойно прокручиваться вместе со страницей, место для него будет зарезервированно родительским контейнером, который не даст прыгать всему остальному содержимому.

Положение внутри блоков и на сайтах с фиксированной шириной

  Так как в реализации данного варианта плавающего блока используется добавочный класс с фиксированным позиционированием, особенности которого заключаются в том, что положение блока на веб-странице привязывается не к родительским элементам, а к окну браузера, то естественно что на сайтах с точно определенной шириной, блок может вести себя некорректно, съезжая за пределы шаблона и родительских блоков. Однако, и эта проблема решается на уровне CSS.
  Решение:
  У родительского блока должна быть указана ширина, любое значение (%, px и т.д.), кроме auto.
  Для основного класса пл-го блока, в данном случаи .floating, необходимо точно указать ширину в абсолютных единицах (напр.: px), при этом она, включая отступы, не должна превышать ширины блока родителя.
  Для прибавочного класса, в данном случаи .fixed, в стилях не стоит указывать смещение влево и вправо (left и right).
  /*-----*/
  Демо с примененными решениями:
DEMO 1

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

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

$(function(){
 var topPos = $('.floating').offset().top;
  $(window).scroll(function() {
  var top = $(document).scrollTop(),
      pip = $('footer').offset().top, //расстояние до подвала от верха окна браузера
      height = $('.floating').outerHeight(); //получаем значение высоты пл.блока
  if (top > topPos && top < pip - height) {$('.floating').addClass('fixed').fadeIn();} //блок будет виден, если значения соответствуют указанным
  else if (top > pip - height) {$('.floating').fadeOut(100);} //блок скроется когда достигнет заданного расстояния
  else {$('.floating').removeClass('fixed');}
  });
});

Переменная значения высоты - не обязательна, если высота известна и меняться не будет можно указать просто цифрами:

$(function(){
 var topPos = $('.floating').offset().top;
  $(window).scroll(function() {
  var top = $(document).scrollTop(),
      pip = $('footer').offset().top;
  if (top > topPos && top < pip - 500){$('#floating').addClass('fixed').fadeIn();} //500 - это высота пл.блока
  else if (top > pip - 500) {$('#floating').fadeOut(100);}
  else {$('#floating').removeClass('fixed');}
  });
});

  Результат:
DEMO 2

  Однако, не всегда нужно чтобы элемент исчезал и появлялся, иногда необходимо чтобы плавающий блок останавливался при достижении "подвала". И в этом случаи все реализуется довольно просто. Код тогда будет таким:

$(function(){
 var topPos = $('.floating').offset().top;
  $(window).scroll(function() {
  var top = $(document).scrollTop(),
      pip = $('.footer').offset().top,
      height = $('.floating').outerHeight();
  if (top > topPos && top < pip - height) {$('.floating').addClass('fixed').removeAttr("style");}
  else if (top > pip - height) {$('.floating').removeClass('fixed').css({'position':'absolute','bottom':'0'});}
  else {$('.floating').removeClass('fixed');}
  });
});

  Результат:
DEMO 3

Т.к. в этом случаи используется абсолютное позиционирование, то у родительского элемента, к низу которого будет прижиматься пл.блок, в стилях должно быть явно указано относительное позиционирование - position: relative;

  Более подробно это видно в прикрепленных ниже HTML файлах

  Файлы с исходным кодом обеих вариантов

  И как и прежде критика, мысли и соображения принимаются в комментариях.

©http://magentawave.com