Я уже давно стал замечать на многих блогах и сайтах небольшие блоки с социальными кнопками, которые забавно так передвигаются за экраном. Прокручиваешь, прокручиваешь, а этот блок с небольшим опозданием следует за вами.
По мне, так это круто просто. Самое главное, сделать этот блок не назойливым, а удобным. Лично для меня, очень удобно, когда я могу поделиться найденной информацией, к примеру, со своими читателями в 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. Это важно! Иначе работать просто не будет.
Комментарии
Нет комментариев к данной статье.
Комментарии