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 »

Related Terms:
Posted on 10th December 2012 by in Web Design Hampshire, Web Design Portsmouth, Web Design Southampton, Web Design Tips
Web Agency Portsmouth
where to go from here? get in touch OR

give us a call on 02392 123 538

Let's be friends! More...
Facebook Twitter Google+
Like & Follow Facebook Twitter Google+
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
Web Design South Coast
Areas We Cover

Here are some of the local areas we provide with web design and digital marketing services. These are just some examples, we work with clients all over the UK and across the globe.

Our Services
Close [X]
The Web Taylor
Harcourt Close Waterlooville, Hampshire PO8 8JL
02392 123358