页面布局

<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>

样式部分

<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:#f77070;
    }
    .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:#7074f7;
        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:#e3c314;
        margin-top:10px;
    }
    .box-fixed{
        width:290px;
        height:600px;
        padding-top:20px;
        background-color:#09c194;
        position:relative;
        top:0px;
        text-align:center;
        color:#fff;
    }
    .tab_fix_bottom {
        position: absolute;
        bottom: 0px;
        top: auto;
    }
    .tab_fix{
        position:fixed;
    }
</style>

jquery

<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>