js获取滚动条距离浏览器顶部,底部的高度

最新推荐文章于 2025-06-16 18:41:56 发布

他化天域外

最新推荐文章于 2025-06-16 18:41:56 发布

阅读量5.5k

点赞数 1

分类专栏：前端 jquery

前端同时被 2 个专栏收录

28 篇文章

订阅专栏

jquery

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript获取滚动条距离浏览器顶部、底部高度的方法，包括获取窗口可视高度、滚动条高度及文档实际高度的函数实现，并通过实例演示了如何实时显示这些数据。

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