div 一直处于屏幕中间

最新推荐文章于 2021-11-04 10:59:28 发布

wangzhantao

最新推荐文章于 2021-11-04 10:59:28 发布

阅读量498

点赞数

分类专栏： web 前端处理文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wangzhantao/article/details/84267056

版权

web 前端处理专栏收录该内容

57 篇文章 0 订阅

订阅专栏

1 js 实现

原理：窗口滚动条滚动，不断调整div的位置

<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
 
 <body>  
<div style="position: absolute;height: 2000px;border: 1px solid green;"> <div style="margin-top: 400px">这个div用来撑起真个页面</div> </div>
<div id="fd" style="height:100px;width:100px;z-index:9999;border:1px solid red">  
	 中间<br><span id="pos"></span>
</div>  
</body>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script language="javascript">  
   $(function() {  
	 $(window).scroll(function(){  
	    var point = getObjWh1( "fd" );  
	    $('#pos').html('x:'+point.x+',<br>y:'+point.y);
	    $('#fd').css( { position: "relative" , left: point.x , top:point.y  } );  
	});  
   });   
   
   function getObjWh1(obj){  
	  var point={};  
	  var st=$(document).scrollTop();//滚动条距顶部的距离  
	  var sl= $(document).scrollLeft();//滚动条距左边的距离  
	  var ch=$(window).height();//屏幕的高度  
	  var cw=$(window).width();//屏幕的宽度  
	  
	  var objH=$("#"+obj).height();//浮动对象的高度  
	  var objW=$("#"+obj).width();//浮动对象的宽度  

	  var objT=Number(st)+(Number(ch)-Number(objH))/2;  
	  var objL=Number(sl)+(Number(cw)-Number(objW))/2;  
	  point.x = objL ;  
	  point.y = objT;    
	  return point;  
	 
}  
 </script> 
</html>

2 css + div 实现div 始终显示屏幕中间

原理：html 作为外层的容器一直都是窗口大小，如果内部东西超过边界则隐藏

body 作为内层容器一直是窗口大小，内部内容高度大于窗口高度边界则滚动条滚动，但总体窗口位置一直不变

内部不动的div是相对于窗口的位置，无论滚动条怎么滚动窗口不动，则这个div位置也不变化。

<html> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style> 
*{ 
	padding:0px; margin:0px; 
	margin-right:10px;
	margin-bottom:10px;
} 

	html{border:4px solid red}
	/*height与width 改成 100%  这里方便观看现象*/
	body,html{height:98%; width:98%; } 
	html{overflow:hidden;} 
	body{overflow-y:auto } 
	.display{  position:absolute;  
		left:50%; top:50%;  
		height:300PX;  width:500PX;  
		margin-left:-250PX;  
		margin-top:-150PX;  
		border:1PX solid #F00;
	} 
</style> 
</head> 
<body style="border:4px solid red"> 
      
	<DIV style="height:2000PX;">测试滚动</DIV> 
	<DIV style="height:2000PX;">测试滚动 </DIV> 
	<DIV style="height:2000PX;">测试滚动</DIV> 
	<div class="display">11111</div> 

</body> 


</html>

wangzhantao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 一直处于屏幕中间

1 js 实现原理：窗口滚动条滚动，不断调整div的位置 &lt;!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;body&gt; &lt;...
复制链接

扫一扫