jQuery实现右侧指定区块固定漂浮效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试</title>
<script type="text/javascript" src="http://www.cqxinhao.com/image/jquery-1.4a2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {            
        t = $('.piaofu').offset().top;
        mh = $('.left').height();
        fh = $('.piaofu').height();
        $(window).scroll(function(e){
            s = $(document).scrollTop();    
            if(s > t - 10){
                $('.piaofu').css('position','fixed');
                if(s + fh > mh){
                    $('.piaofu').css('top',mh-s-fh+'px');    
                }                
            }else{
                $('.piaofu').css('position','');
            }
        })
    });
</script>
<style type="text/css">
    *{ padding:0px; margin:0px;}
    .box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden;}
    .left{ width:770px;height:2000px; background:#000;float:left;}
    .right{ width:220px; background:#FC6; float:right;}
    .sub01{ width:220px; height:100px; background:#0CC; margin-bottom:10px;}
    .piaofu{ width:220px; height:300px; background:#F66; font:normal 13px/30px \5FAE\8F6F\96C5\9ED1; text-align:center; top:10px;}
</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right">
        <div class="sub01"></div>
        <div class="sub01"></div>
        <div class="sub01"></div>
        <div class="piaofu">我要固定漂浮</div>        
    </div>
</div>
</body>
</html>

添加新评论