【HTML】- 固定边框滚动

固定边栏滚动效果，主页面的长度大于侧轴页面长度时，在滑动过程中，侧轴的到达底部时，使其固定不再跟随主页面继续滑动。

1.1 html结构

实例以图片为主页面和侧轴内容

<div id="container">
    <div id="content">
        <img src="images/content.jpg" alt="content">
    </div>
    <div id="side">
        <img src="images/2.png" alt="2">
    </div>
</div>

1.2 css样式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #222222;
    }
    #container{
        margin: 0 30px 0 30px;
    }
    #content{
        float: left;//左浮动
    }
    #side{
        float: right;//右浮动
    }
    #content:after,#side:after{//清除浮动效果
        display: block;
        content: '';
        height: 0;
        visibility: hidden;
        clear: both;
    }
</style>

1.3 js逻辑

<script>
        /*根据id获取元素*/
        var $ = function (id) {
            return document.getElementById(id)
        }
        var side = $('side')
        /*监听事件*/
        /*addEvent用于给一个元素绑定多个事件*/
        var addEvent = function (obj, event, fn) {
            if (obj.addEventListener){
                /*event：事件名称，fn:回调函数，false*/
                obj.addEventListener(event,fn,false)
            }else if(obj.attachEvent){//IE
                obj.attachEvent('on' + event,fn)
            }
        }
       var scrollEvent = function () {
           /*获得元素的高度*/
           var sideHeight = side.offsetHeight
           /*获得可视区域的高度*/
           var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
           /*获得滑动高度*/
           var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop
           /*当可视区域高度+滑动高度>元素的高度*/
           if((clientHeight+scrollHeight) > sideHeight){
               side.style.cssText = 'position:fixed;right:30px;top:' + (-(sideHeight - clientHeight)) +'px'
           }else {
               /*默认定位*/
               side.style.position = 'static'
           }
       }
        //或单独写事件
        window.onscroll = function () {
            scrollEvent()
        }
        window.onresize = function () {
            scrollEvent()
        }
    </script>