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>

三、總結：功能很常見，主要目的是做個筆記。當然，相信實現方法不止一種，如果大家遇到更好的方法，可以一起學習。