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

Автор

Комментарии

Нет комментариев к данной статье.

Комментарии

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





← Старые Новые →