Прилипший блок, который следует за экраном с помощью jQuery

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

По мне, так это круто просто. Самое главное, сделать этот блок не назойливым, а удобным. Лично для меня, очень удобно, когда я могу поделиться найденной информацией, к примеру, со своими читателями в Twitter`е.

Такая реализация, как нельзя лучше, для этого подходит.

Вот пример, для того, чтобы было понятно о чем я тут пишу.
Пример прилипшего блока

Для особо любознательных можно посмотреть исходный код страницы с примером, ну а для ленивых приведу используемый JS-код здесь:

<script>
// Float Social block
$(document).ready(function() {
  var fixed = $("#social");  
  var offset = fixed.offset();
  var topPadding = 40;
  $(window).scroll(function() {
	  if ($(window).scrollTop() > offset.top) {
	    fixed.stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
	  } else {
	    fixed.stop().animate({marginTop: 0});
	  };
	});
});
</script>

В CSS необходимо добавить блоку #social свойство position: absolute. Это важно! Иначе работать просто не будет.

P.S. Каждый человек не должен зацикливаться только на роботе. Нужно хоть иногда отдыхать. Самым лучшим отдыхом можно считать только активный отдых. Будут это мотоциклы, гребные лодки, футбол, керлинг – это не важно. Самое главное, найти время и найти тот активный вид спорта, который будет Вам нравится и Вы с радостью будите им заниматься.

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

  1. Полина опубликовал комментарий 15 Ноябрь 2015, 01:57 #

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

    | Ответить
  2. Anton опубликовал комментарий 13 Февраль 2016, 22:57 #

    Возникла с этим скриптом проблема – при изменении Наполнения страницы с помощью того же JQ (например сворачивание\разворачивание элементов), скользящий блок начинает отставать или опережать экран на высоту, занятую развернутым элементом.
    Как можно решить проблему?

    | Ответить
Имя
e-mail
Сайт
Текст комментария: