вариант фиксации блока перед футером ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type='text/css'>
body{padding:0px;margin:0px}
*{margin:0}
html,body{height:1000px}
.wrapper{min-height:100%;height: auto !important;height:100%;margin:0 auto -170px}
.footer,.push{height:270px}
.footer{background:#F00}
.sidebar{
width:245px;
margin-top:15px;
margin-left:300px;
height:500px;
padding:13px;
font-size:14px;
font-style: italic;
font-family: 'Arial';
border: 2px solid #bab89a;
position: fixed;
background-color: #FF0000;
}
.sidebar .content .text{
position: absolute;
}
</style>
<script type='text/javascript'>
$(function () {
var a = $(".sidebar"),
c = a.offset(),
d = a.outerHeight(!0),
e = $(".footer").offset();
$(document).scroll(function () {
var b = $(this).scrollTop(),
b = e.top - (b + d + c.top);
0 < b ? a.css({
background: "red",
top: c.top
}) : a.css({
background: "green",
top: c.top + b
})
})
});
</script>
</head>
<body>
<div class="sidebar"></div>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>
</body>
</html>