jQuery: Animated Scroll Follow

You have probably seen it somewhere, you scroll down the page and the sidebar (or another element on the page) follows you. There are some good benefits of implementing this. If you have a menu or ads that you want to be visible as much as possible, it is a great way to keep it on the screen. Although this should only really be done if the sidebar (or element) is not longer than the page, otherwise it can cause some usability issues.

Implementing this onto your site is very easy, just add the following HTML, CSS & jQuery:

HTML

<div id="rightbar">
<div id="rightbar_scroll">YOUR CONTENT HERE</div>
</div>

CSS

#rightbar{
float:right;
position:relative;
width:200px;
margin-top:20px;
}
#rightbar_scroll{
position:absolute;
top:0;
padding:5px;
border:1px solid #CCC;
background:#EAEAEA;
}

jQuery

$(document).ready(function(){
var $sidebar = $("#rightbar_scroll"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});