zoukankan      html  css  js  c++  java
  • 右侧固定,左侧自由滚动

     *{ 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 5FAE8F6F96C59ED1; 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>
  • 相关阅读:
    stl学习笔记—set/multimap
    2013 杭州站 hdoj4778 Gems Fight!
    矩阵加速数列递推
    暑假写的两个数据结构
    AC自动机模板 hdoj2222 UVA-11468
    树莓派安装3.5英寸触摸屏幕
    树莓派设置NTP同步
    在树莓派上设置无线静态IP
    运行tomcat7w.exe未安装指定的服务
    LoadRunner 11安装Micosoft Visual C++ 2005 SP1时提示命令行选项语法错误
  • 原文地址:https://www.cnblogs.com/xuemingyao/p/5412391.html
Copyright © 2011-2022 走看看