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

最新推荐文章于 2023-06-30 17:38:46 发布

yinxianluo

最新推荐文章于 2023-06-30 17:38:46 发布

阅读量5.6k

点赞数

分类专栏： JAVA开发文章标签： js

本文链接：https://blog.csdn.net/yinxianluo/article/details/41077131

版权

本文介绍了如何使用JavaScript实现当滚动条滚动时，元素到浏览器顶部的距离始终保持不变，即使滚动也只会是top值加上滚动的距离。文中提供了一个示例代码，包括获取滚动条位置、窗口高度和文档内容高度的方法，适用于IE和Firefox。

摘要由CSDN通过智能技术生成

jQuery当滚动条滚动时一个元素到浏览器顶部的距离随滚动条滚动时，到顶部的距离为本身的top+滚动条滚动

的距离，就是固定div 的位置不随滚动条滚动改变，不用fixed，就是一滚动top就等于滚动距离加上top。如此保证div到浏览器顶部的距离不变。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>jquery浮动层</title> 
    <script src="jquery-1.8.3.js"></script><!-- 注意修改引用路径 -->
    <style type="text/css"> 
          #Float {background-color: #000;height: 200px;width: 100px;position: absolute;top:    80px;right: 20px;} 
     </style> 
</head> 
<script language="javascript"> 
　　$(document).ready(function(){ 
　　    $(window).scroll(function (){
                 // 让浮动层距离窗口顶部，始终保持80px
　　         var offsetTop = $(window).scrollTop() + 80 +"px";            
　　          $("#Float").animate({top : offsetTop },{ duration:500 , queue:false });
　　    });
　　});
</script> 
<body> 
<div style="height:2000px;"></div> 
<div id="Float"></div> 
</body> 
</html> 

这段代码copy到一个空的html中，注意修改jQuery.1.8.3.js的引用路径，然后在浏览器中打开这个页面，可以看到效果，应该就是你想要的

追问

太感谢了不过出现了这个现象

进到下面的div里面了。能不能做成这个div到网页顶部的距离始终等于它到网页顶部的距离加上滚动条滚动的距离，比如滚动条没动 top是100，滚动条滚动10，top=top+10；一直这样的一个效果

回答

// 让浮动层距离窗口顶部，始终保持80px
var offsetTop = $(window).scrollTop() + 80 +"px";  
这句话应该就是你说的效果
$(window).scrollTop()就是滚动条滚动后的距离，然后offsetTop就是你写的：top = top + 10

function bb(){

var obj = document.getElementById("aaa");

var topa = obj.offsetTop

var top=document.documentElement.scrollTop;

document.getElementById("aaa").innerHTML = topa-top;

}

window.οnlοad=function(){

document.documentElement.scrollTop = "200px";

}

使用js获取的相关方法

//回到页面顶部
	$("#goTotop").click(function(){
		$('body,html').animate({scrollTop:0},1500); //点击按钮让其回到页面顶部
	});
	
	$(window).scroll(function() {
		var yheight1=window.pageYOffset; //滚动条距顶端的距离
		var yheight=getScrollTop(); //滚动条距顶端的距离
		var height =document.documentElement.clientHeight//浏览器可视化窗口的大小
		var top=parseInt(yheight)+parseInt(height)-217;
		var divobj=$(".kf");
		divobj.attr('style','top:'+top+'px;');
	})
	
/**
 * 获取滚动条距离顶端的距离
 * @return {}支持IE6
 */
function getScrollTop() {
		var scrollPos;
		if (window.pageYOffset) {
		scrollPos = window.pageYOffset; }
		else if (document.compatMode && document.compatMode != 'BackCompat')
		{ scrollPos = document.documentElement.scrollTop; }
		else if (document.body) { scrollPos = document.body.scrollTop; } 
		return scrollPos; 
}

getScrollTop（）使用这个方法在IE、谷歌和火狐上都能获取。

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享，这个是同时兼容ie和firefox的。

首先我们需要知道的两个定义是：

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

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

好了，明白了这个定义，那我们就来具体看看如何获取各种高度的方法，下面同时举了一个示例。

获取窗口可视范围的高度

 
       1
       function getClientHeight(){  
     
       2
           var clientHeight=0;  
     
       3
           if(document.body.clientHeight&&document.documentElement.clientHeight){  
     
       4
               var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;          
     
       5
           }else{  
     
       6
               var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;      
     
       7
           }  
     
       8
           return clientHeight;  
     
       9
       }

获取窗口滚动条高度

 
       1
       function getScrollTop(){  
     
       2
           var scrollTop=0;  
     
       3
           if(document.documentElement&&document.documentElement.scrollTop){  
     
       4
               scrollTop=document.documentElement.scrollTop;  
     
       5
           }else if(document.body){  
     
       6
               scrollTop=document.body.scrollTop;  
     
       7
           }  
     
       8
           return scrollTop;  
     
       9
       }

获取文档内容实际高度

最低0.47元/天解锁文章

yinxianluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享，这个是同时兼容ie和firefox的。首先我们需要知道的两个定义是：滚动条距离浏览器顶部的高度 = 窗口滚动条高度；滚动条距离浏览器底部的高度 = 文档（页面）内容实际高度 - 滚动条距离浏览器顶部的高度 - 窗
复制链接

扫一扫