代码改变世界

fixed定位

2012-08-19 20:37  边缘er  阅读(1129)  评论(0编辑  收藏  举报
function fixedBar(o){
    var bar = document.getElementById(o.id),
        width = bar.offsetWidth,
        height = bar.offsetHeight,
        dir = o.dir,
        at = o.at,
        left = o.left,
        right = o.right,
        top = o.top,
        bottom = o.bottom,
        body = document.body,
        html = document.documentElement;
    //css:left right top bottom
    var    posCss = 'position:fixed;_position:absolute;';
    if(at != 1){
        left = right =     ((Math.max(html.clientWidth, html.scrollWidth) - at)/2 - width);
    }
    if(dir=='lt'){
        posCss = posCss + 'left:'+left+'px;top:'+top+'px;';
    }else if(dir=='lb'){
        posCss = posCss + 'left:'+left+'px;bottom:'+bottom+'px;';
    }else if(dir=='rt'){
        posCss = posCss + 'right:'+right+'px;top:'+top+'px;';
    }else if(dir=='rb'){
        posCss = posCss + 'right:'+right+'px;bottom:'+bottom+'px;';
    }
    bar.style.cssText = posCss;
    //ie6
var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
    if(isIE6){
        //scrollTop    
        function getPageScroll(){
            var yScroll; 
            if (html && html.scrollTop){ 
                yScroll = html.scrollTop; 
            } else if (body) { 
                yScroll = body.scrollTop; 
            } 
            return yScroll; 
        }
        if(dir=='lt' || dir=='rt'){
            onscroll = function(){
                bar.style.top = (getPageScroll() + top) + 'px';
            }
        }else if(dir=='lb' || dir=='rb'){
            onscroll = function(){
                bar.style.top = (getPageScroll() + html.clientHeight - (height+bottom)) + 'px';
            }
        }
        
    }
}
fixedBar({'id':'fixed','dir':'lt','at':1,'top':20,'left':0});
*html{background-image:url(about:blank);background-attachment:fixed;}

  只有定位一个功能,可以定在左上,左下,右上,右下。可以以全屏为基准(at设置为1,取100%的意思),以内容宽度为准(假如定位在1002宽度的边上,at设置为1002)。