ef591311

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by salipro4ever</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    .header{width:100%;background:red;height:80px}
.content{width:80%;background:blue;height:800px;float:left}
.sidebar{width:20%;background:yellow;height:190px;float:right}
.footer{width:100%;background:gray;height:600px;clear:both}
.sidebar.fixed{position:fixed;right:50%;margin-right:-50%}
  </style>
  

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$window = $(window),
$sidebar = $(".sidebar"),
sidebarTop = $sidebar.position().top,
sidebarHeight = $sidebar.height(),
$footer = $(".footer"),
footerTop = $footer.position().top,    
$sidebar.addClass('fixed');

$window.scroll(function(event) {
    scrollTop = $window.scrollTop(),
    topPosition = Math.max(0, sidebarTop - scrollTop),
    topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
    $sidebar.css('top', topPosition);
});
});//]]>  

</script>


</head>
<body>
  <div class="header">This is the big boy header - Hãy kéo thanh cuộn để xem nhé</div>
<div class="content">This is the content</div>
<div class="sidebar">This is the sidebar</div>
<div class="footer">The poor footer lies here</div>
  
</body>


</html>