Плавающий боковой блок

Иногда бывает нужно чтобы какой-либо боковой блок пролистывался вместе с основным контентом. При этом, этот блок будет будет следовать с небольшой задержкой привлекая дополнительно внимание.
Ставим его перед выводом основного блока (div id=»content»)

<div id="share-pannel">

CSS блока

#share-pannel {
    padding: 5px;
    position: absolute;
    left: -45px;
    top: 100px;
    width: 35px;
    background-color: rgba(17,17,17,0.8);
    border-radius: 3px 0 0 3px;
    color: #fff;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

Скрипт

// Зафиксированный боковой блок

$(function() {
var offset = $("#share-pannel").offset();
var topPadding = 15;
$(window).scroll(function() {

if ($(window).scrollTop() > offset.top) {
$("#share-pannel").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding

});
} else {
$("#share-pannel").stop().animate({
marginTop: 0
});
}
});
});

Кнопки «Поделится»

Данное решение может пригодится, например, для кнопок «Поделится».

#share-pannel {
    padding: 5px;
    position: absolute;
    left: -45px;
    top: 100px;
    width: 35px;
    background-color: rgba(17,17,17,0.8);
    border-radius: 3px 0 0 3px;
    color: #fff;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

#share-pannel a {
display: inline-block;
vertical-align: inherit;
margin: 5px 0 0 2px;
padding: 0px;
font-size: 0px;
width: 30px;
height: 30px;
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll 0px 0px transparent;}

#share-pannel a.vkontakte {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -126px 0px transparent;
}
#share-pannel a.google {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -189px 0px transparent;
}
#share-pannel a.twitter {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -32px 0px transparent;
}
#share-pannel a.mail {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -294px 0px transparent;
}
#share-pannel a.odnoklassniki {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -95px 0px transparent;
}
#share-pannel a.email {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -379px 0px transparent;
}
#share-pannel a.print {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -410px 0px transparent;
}