HTML实现左侧内容可滚动，右侧列表固定布局

一、前言：最近在项目中，遇到一个页面布局问题，说是布局，其实就是实现一个新闻页面的交互问题；功能比较常见，就是左侧的内容部分可以滚动，右侧的列表固定定位。这个功能比较常见，目前已实现，就是布局+JS配合实现该效果；先上图，大概就是下图右侧列表随滚动条固定在右侧，左侧可以滚动的效果，当滚动条接近底部时，为了使右侧列表不覆盖底部，需要用js处理，设置右侧列表的bottom值，具体请看代码。

二， 代码部分，由于是公司项目，没有把源代码拿过来，在这里我写了一个demo，来测试该功能，页面结构是一样的。

html结构

<section class="sec-wrapper">   
    <header class="head-top">页面头部</header>
    <section class="main-section">  
        <div class="div-wrapper clearfix">
            <div class="cont-left">
                <div class="cont-item"></div>
                <div class="cont-item"></div>
                <div class="cont-item"></div>
                <div class="cont-item"></div>
                <div class="cont-item"></div>
                <div class="cont-item"></div>
                <div class="cont-item"></div>
                <div class="cont-item"></div>
            </div>
            <div class="list-right">
                <div class="box-fixed">新闻列表</div>
            </div>
        </div>
    </section>
</section>
<footer class="foot">页面底部</footer>

小节：关于htmL页面结构，就是头部、底部、内容部分，结构比较清晰；我们的内容部分的左侧是class类为cont-left的div元素，右侧是class类为list-right的div元素；我们需要固定的就是list-right的div元素。

css样式

<style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        html,body,header,footer,div,section{
            padding:0;
            margin:0;
        }
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
            height:0;
            visibility:hidden;
        }
        .clearfix{
            zoom:1;
        }
        .sec-wrapper{
            min-height:100%;
        }
        .head-top{
            width:100%;
            height:100px;
            line-height:100px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#E74445;
        }
        .main-section{
            padding-bottom:100px;
            margin:20px auto;
        }
        .foot{
            width:100%;
            height:100px;
            line-height:100px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#528FEA;
            margin-top:-100px;
        }
        .div-wrapper{
            width:1200px;
            margin:0 auto;
            background:#F4F6F9;
            position:relative;
        }
        .cont-left{
            width:900px;
            float:left;
            margin-right:10px;
        }
        .list-right{
            float:left;
        }
        .cont-item{
            width:100%;
            height:200px;
            background:tan;
            margin-top:10px;
        }
        .box-fixed{
            width:290px;
            height:600px;
            padding-top:20px;
            background-color:#89A1C5;
            position:relative;
            top:0px;
            text-align:center;
            color:#fff;
        }
        .tab_fix_bottom {
            position: absolute;
            bottom: 0px;
            top: auto;
        }
        .tab_fix{
            position:fixed;
        }
    </style>

小节：关于css样式设置，是有一定的技巧的，对于内容部分实现左右两栏布局，方式有多种，这里需要用到浮动，这样我们就不用再设置left-right容器的left值，省去很多麻烦，然后给内容的父容器设置position：relative; 滚动到一定高度时，我们给box-fixed容器添加tab_fix类固定，当滚动条接近底部时，为了不让固定的列表容器覆盖底部，可以使用绝对定位，设置bottom值，就是添加tab_fix_bottom类。

js部分

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
          var fheight = $('.foot').height() + 30; // 获取底部及底部上方边距的总高度
          var boxfixed = $('.box-fixed');  // 获取固定容器的jquery对象
          $(window).scroll(function() {
              var scrollTop = $(window).scrollTop();  // 获取滚动条滚动的高度
              var contLeftTop = $('.cont-left').offset().top+20; // 右侧列表相对于文档的高度
              var scrollBottom = $(document).height() - $(window).scrollTop() - boxfixed.height();
              if (scrollTop >= contLeftTop) {
                if (scrollBottom > fheight) {  // 滚动条距离底部的距离大于fheight,添加tab_fix类,否则添加tab_fix_bottom类
                  boxfixed.removeClass("tab_fix_bottom").addClass('tab_fix');
                } else {
                  boxfixed.removeClass('tab_fix').addClass("tab_fix_bottom");
                }
              } else if (scrollTop < contLeftTop) {
                boxfixed.removeClass('tab_fix').removeClass("tab_fix_bottom");
              }
          });
    });
</script>

三、总结：功能很常见，主要目的是做个笔记。当然，相信实现方法不止一种，如果大家遇到更好的方法，可以一起学习。