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
});
}
});
});
Free Graphics, Icons, Tutorials
Free Graphics Free Weather Icons PSDFree Debit / Credit Card PSD GraphicFree Drinks PSD GraphicsFree Shopping Icons PSDFree Camera PSD GraphicFree Flat Office Icon Pack 2
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358