【转】js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

http://www.phpernote.com/javascript-function/755.html

获取窗口可视范围的高度

function getClientHeight(){   
    var clientHeight=0;   
    if(document.body.clientHeight&&document.documentElement.clientHeight){   
        var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;           
    }else{   
        var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;       
    }   
    return clientHeight;   
}

获取窗口滚动条高度

function getScrollTop(){   
    var scrollTop=0;   
    if(document.documentElement&&document.documentElement.scrollTop){   
        scrollTop=document.documentElement.scrollTop;   
    }else if(document.body){   
        scrollTop=document.body.scrollTop;   
    }   
    return scrollTop;   
}

获取文档内容实际高度

function getScrollHeight(){   
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);   
}

 

滚动条距离浏览器顶部的高度 = 窗口滚动条高度；

滚动条距离浏览器底部的高度 = 文档（页面）内容实际高度 - 滚动条距离浏览器顶部的高度 - 窗口可视范围的高度；

 

完整代码如下：

<html xmlns="http://www.phpernote.com/javascript-function/754.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js获取滚动条距离浏览器顶部,底部的高度</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//取窗口可视范围的高度
function getClientHeight(){   
    var clientHeight=0;   
    if(document.body.clientHeight&&document.documentElement.clientHeight){   
        var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;           
    }else{   
        var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;       
    }   
    return clientHeight;   
}
//取窗口滚动条高度
function getScrollTop(){   
    var scrollTop=0;   
    if(document.documentElement&&document.documentElement.scrollTop){   
        scrollTop=document.documentElement.scrollTop;   
    }else if(document.body){   
        scrollTop=document.body.scrollTop;   
    }   
    return scrollTop;   
}
//取文档内容实际高度
function getScrollHeight(){   
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);   
}
window.onscroll=function(){
    var height=getClientHeight();
    var theight=getScrollTop();
    var rheight=getScrollHeight();
    var bheight=rheight-theight-height;
    document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight;
}
function fixDiv(div_id,offsetTop){
    var offsetTop=arguments[1]?arguments[1]:0;
    var Obj=$('#'+div_id);
    var ObjTop=Obj.offset().top;
    var isIE6=$.browser.msie && $.browser.version == '6.0';
    if(isIE6){
        $(window).scroll(function(){
            if($(window).scrollTop()<=ObjTop){
                    Obj.css({
                        'position':'relative',
                        'top':0
                    });
            }else{
                Obj.css({
                    'position':'absolute',
                    'top':$(window).scrollTop()+offsetTop+'px',
                    'z-index':1
                });
            }
        });
    }else{
        $(window).scroll(function(){
            if($(window).scrollTop()<=ObjTop){
                Obj.css({
                    'position':'relative',
                    'top':0
                });
            }else{
                Obj.css({
                    'position':'fixed',
                    'top':0+offsetTop+'px',
                    'z-index':1
                });
            }
        });
    }
}
$(function(){fixDiv('show',5);});
</script>
</head>
<body>
<div style="height:500px;"></div>
<div>http://www.phpernote.com/jquery/251.html</div>
<div id="show"></div>
<div style="height:2000px;"></div>
</body>
</html>
View Code

 

posted @ 2015-03-25 10:34  农码一生  阅读(540)  评论(0)  编辑  收藏  举报
www.qingnakeji.com 擎呐科技
.