Прилипший блок, который следует за экраном с помощью 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. Это важно! Иначе работать просто не будет.

Теги: и

Комментарии

Полина, 15.11.2015 00:57 #

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

Anton, 13.02.2016 21:57 #

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






Комментарии
Интересное