Code này nó cố định một chỗ, sau khi kéo chuột xuống thì nó trượt theo, khi kéo chuột lên thì tới điểm dừng là nó không theo nữa :khakha:
Demo: tuoitreit.vn xem trên style pc phần block nhá :khakha:
Demo: tuoitreit.vn xem trên style pc phần block nhá :khakha:
HTML:
<style>#sticky {
height:250px; /* chiều cao của banner quảng cáo*/
width:250px; /* độ rộng của banner quảng cáo*/
position:relative;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
var $stickyHeight = 460; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 2500; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 180; // Định vị điểm dừng của banner, tính từ chân lên
/* <=!=[=C=D=A=T=A=[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]=]=> */
</script>
<div id="sticky">
<img src="http://img203.imageshack.us/img203/353/tuoitrevnbiz12012013.png" title="" width="240px" />
</div>