Animated jQuery Scroll Follow

10th December 2012

We have had a few requests from customers who wanted a sidebar that follows the page as the user scrolls down so we decided to write a short guide on how it’s done. This is also something that we decided to incorporate onto the sidebar of our blog. So when a user is scrolling down the page, the sidebar containing the blog categories follows them all the way down to make it easier to find what they are looking for. It is very simple to implement and can be done by using CSS & jQuery.

See the demo here »
Download the file here »

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
            });
        }
    });
});

See the demo here »
Download the file here »

Last updated by at .

Got An Opinion On This Article?

Share your comments with us...


*