<html>
<head>
<style>
#social-float {
position: fixed;
bottom: 10px;
left: 10px;
width: 55px;
padding: 10px 5px;
text-align: center;
background-color: #fff;
border: 5px solid #ccd0d5;
border-radius: 2px;
}
#footer { height: 5em; background: #888; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function checkOffset() {
var a=$(document).scrollTop()+window.innerHeight;
var b=$('#footer').offset().top;
if (a<b) {
$('#social-float').css('bottom', '10px');
} else {
$('#social-float').css('bottom', (10+(a-b))+'px');
}
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);
</script>
</head>
<body>
<div style="height:1000px">long content sample</div>
<div id="social-float">
<div class="sf-twitter">twitter</div>
<div class="sf-facebook">facebook</div>
<div class="sf-plusone">plusone</div>
</div>
<div id="footer">footer sample</div>
</body>
</html>
The code above is rendered as follows:
【footer】
