右侧固定，左侧自由滚动

最新推荐文章于 2021-06-02 15:37:39 发布

weixin_34104341

最新推荐文章于 2021-06-02 15:37:39 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuemingyao/p/5412391.html

 *{ padding:0px; margin:0px;}
        .box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden;}
        .main{ width:770px; height:2000px; background:#000; float:left;}
        .sub{ width:220px; background:#FC6; float:right; position: relative;}
        .sub01{ width:220px; height:100px; background:#0CC; margin-bottom:10px;}
        .fixed{ width:220px; height:900px; border-bottom: 2px solid #333; background:#F66; font:normal 13px/30px \5FAE\8F6F\96C5\9ED1; text-align:center;}
        .bottom{width: 1000px; height: 200px; background: #ed7215; overflow: hidden;}

<div class="box">
    <div class="bottom">我是头部</div>
    <div class="main"></div>
    <div class="sub">
        <div class="sub01"></div>
        <div class="sub01"></div>
        <div class="fixed">我是固定的哟</div>
    </div>
    <div class="bottom">我是底部</div>
</div>

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $oDivTop=$(".fixed").offset().top;
        var $oMain=$(".main").offset().top;
        var $mHeight=$(".main").height();
        var $fHeight=$(".fixed").height();
        var $cha=$mHeight-$fHeight;
        var $chaO=$mHeight+$oMain-$fHeight;
        $(window).scroll(function(){
            var $scrollTop=$(document).scrollTop();
            var $dTop=-($scrollTop-$chaO)+"px";
            if($mHeight>$fHeight){
                if($scrollTop>=$oDivTop && $scrollTop<$oMain+$cha){
                    $(".fixed").css({"position":"fixed","top":"0"});
                }else if($scrollTop>$chaO){
                    $(".fixed").css({"position":"fixed","top":$dTop});
                }else{
                    $(".fixed").css("position","");
                }
            }
        })
    })
</script>