<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<script src="http://web.yi6cdn.com/jquery.js"></script>
<style>
*{padding:0;margin:0}
body{height:2000px}
.sidebar{width:100px;height:200px;background:gray;position:absolute;top:100px;left:20px}
</style>
</head>
<body>
<div class="sidebar"></div>
<script>
$(function() {
function scrollbar(target,paddingTop){
var win=$(window),sidebar=$(target);
var offset = sidebar.offset();
var topPadding = paddingTop;
var timeout=null;
win.scroll(function() {
clearTimeout(timeout);
timeout=setTimeout(function(){
if (win.scrollTop() > offset.top) {
sidebar.stop().animate({
marginTop: win.scrollTop() - offset.top + topPadding
});
} else {
sidebar.stop().animate({
marginTop: 0
});
};
},250)
});
}
scrollbar('.sidebar',100)
});
</script>
</body>
</html>
