对联随滚动条滚动的层（多重判断）

一个悬浮的层，随屏滚动；
可选左右两边（运行2次即可做对联）；
可选在最左边或最后边，也可以紧贴页面内容左右（如果页面内容宽度1002，而显示器分辨率为1900，可使悬浮广告紧贴1002内容）；
可设置头和底高度，无论如何滚动也不会盖住头底。

js代码

function scrollBar(scrollId, o){
    //获取滚动条高度
    function getPageScroll(){
        var yScroll; 
        if (self.pageYOffset) { 
            yScroll = self.pageYOffset; 
        } else if (document.documentElement && document.documentElement.scrollTop){ 
            yScroll = document.documentElement.scrollTop; 
        } else if (document.body) { 
            yScroll = document.body.scrollTop; 
        } 
        return yScroll; 
    }
    //滚动层宽高
    var scrollBar = document.getElementById(scrollId),
        barWidth = scrollBar.offsetWidth,
        barHeight = scrollBar.offsetHeight;
    //可视区域宽和高
    var pageWidth = document.documentElement.clientWidth,
        pageHeight = document.documentElement.clientHeight;
    //有滚动条时的宽高
    var widthMore = document.documentElement.scrollWidth,
        heightMore = document.body.scrollHeight || document.documentElement.scrollHeight;    
    //最大宽高
    var maxWidth = Math.max(pageWidth, widthMore),
        maxHeight = Math.max(pageHeight, heightMore);
    //判断参数
    if (o == undefined){
        var top = 0, foot = 0, dir = 'right', contWidth = '100%';
    }else{
        var top = o.top || 0,
            foot = o.foot || 0,
            dir = o.dir || 'right',
            contWidth = o.contWidth || '100%';
        //关闭和返回顶部
        if (o.btnClose){
            var closeBtn = document.getElementById(o.btnClose);
            closeBtn.onclick = function(){
                scrollBar.style.display = 'none';
            }
        }
        if (o.btnTop){
            var gotopBtn = document.getElementById(o.btnTop);
            gotopBtn.onclick = function(){
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;
            }
        }
    }
    //设置top--假设滚动框高度小于整个页面高度，如果大于直接将其隐藏
    if (maxHeight < (barHeight + top + foot)){
        scrollBar.style.display = 'none';
    }else{
        //不挡顶部---如果想改距顶高度，改下边的第一个2值
        scrollBar.style.top = getPageScroll() + top + 'px';
        //不挡底部
        if ((heightMore - getPageScroll() - barHeight) <= foot){
            scrollBar.style.top = heightMore - foot - barHeight + 'px';
        }
    }
    //无视主体内容-左右
    if (dir == 'left' && contWidth == '100%'){
        scrollBar.style.left = 0 + 'px';
    }else if (dir == 'right' && contWidth == '100%'){
        scrollBar.style.left = maxWidth - barWidth + 'px';
    //根据主体内容宽-左右
    }else if (dir == 'left' && contWidth !== '100%'){
        if (pageWidth >= (barWidth*2 + contWidth)){
            scrollBar.style.left = (pageWidth - contWidth)/2 - barWidth + 'px';
        }else{
            scrollBar.style.left = 0 + 'px';
        }
    }else if (dir == 'right' && contWidth !== '100%'){
        if (pageWidth >= (barWidth*2 + contWidth)){
            scrollBar.style.left = (pageWidth - contWidth)/2 + contWidth + 'px';
        }else{
            scrollBar.style.left = maxWidth - barWidth + 'px';
        }
    }
    //改变窗口大小或滚动条滚动
    resizeWindow(scrollId, o);
    
}
function resizeWindow(scrollId, o){
    window.onresize = function(){scrollBar(scrollId, o);}
    window.onscroll = function(){scrollBar(scrollId, o);}
}
scrollBar("scroll_div",{dir:'left', top:42, foot:42, contWidth:1002, btnTop:'btn_gotop', btnClose:'btn_close'});

参数说明：
scrollId：这个是要滚动的id（唯一必选参数）；
其他参数o使一个josn对象，为可选参数，属性如下，
dir：可取“left”或“right”，默认为right；
top和foot：头和底的高度，默认都是0；
contWidth：页面内容宽度，如果使用，悬浮则贴着内容显示（并且当可视区宽度小于内容宽度，悬浮现在内容区内），否则悬浮显示在最左边或最右边（默认）；
btnTop：返回顶部按钮id，默认没有此按钮；
btnClose：关闭悬浮按钮id，默认没有此按钮。

html代码：

<div class="head">头</div>
<div class="main"></div>
<div class="foot">底</div>
<div id="scroll_div">
    <span id="btn_close">关闭</span><br />
    <span id="btn_gotop">返回顶部</span>
</div>

css代码：

body,div{ margin:0; padding:0;}
.head,.foot{height:42px;margin:0 auto; background-color:#060; text-align:center;}
.main{width:1002px; height:1000px; margin:0 auto; background-color:#f60;}
#scroll_div{ position:absolute; width:100px; height:400px; background:#990; }
#btn_close,#btn_gotop{ cursor:pointer;}