Admin
Well-Known Member
Staff member
Administrator
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>
