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>
相关推荐
下面将逐一介绍如何让 DIV 元素分别处于屏幕的五个不同位置。 ##### 1. 屏幕中间 **CSS 部分** ```css #Javascript.Div1 { position: absolute; border: 2px solid red; background-color: #EFEFEF; line-...
以上代码确保了无论窗口大小如何变化，弹框始终处于屏幕中心。然而，如果页面滚动，弹框的位置可能会偏离。为解决这个问题，可以监听窗口的滚动事件并实时调整弹框位置： ```javascript $(window).on('scroll', ...
当网页内容不足以填满整个屏幕时，传统的布局方式会让底部元素提前出现在页面中间，留下大片空白区域，这在视觉上并不理想。为了解决这个问题，设计师们寻求各种CSS解决方案，但有些方案可能在窗口尺寸调整时引发...
<div class="ij-toggler" data-toggle="on"></div> ``` 这里，`data-toggle`属性用于设置初始状态（'on'、'off' 或 'toggle'）。 然后，通过jQuery选择器和插件方法激活ijToggler： ```javascript $(document)....
然而，页脚的定位问题时常困扰着开发者，特别是当页面内容不足以填满整个屏幕时，页脚可能会出现在页面的中间位置，而非预期的底部。为了解决这个问题，我们可以利用CSS（Cascading Style Sheets）来实现“固定页脚...
（4）触发位置：表示中心方格图与触发位置中间的（时间）偏差。 （5）指针：表示触发位准。 （6）读数：表示触发为准的数字值。 （7）图标：表明边沿触发的所选触发斜率。 （8）读数：表示用以触发的触发信源。 （9...
这些数据可能是程序运行时的中间结果、缓存或者是一次性使用的文件。在本案例中，"tmp:Tmp"可能是一个特定项目或应用程序的临时工作空间。 "HTML"标签表明我们关注的是与超文本标记语言（HTML）相关的内容。HTML是...
描述中的内容较为空白，可能意味着这个项目还处于初期阶段，或者它是一个测试站点，尚未填充详细信息。 【标签】"HTML" 指的是超文本标记语言（HyperText Markup Language），它是创建网页的标准标记语言。HTML与...
- 使用`flex`布局，将元素设置为三列，中间列占据剩余空间。 - 或者使用`grid`布局实现。 **12. 常见兼容性问题？** - 浏览器解析差异。 - 版本间的CSS差异。 **13. li间空白间隔的原因及解决办法？** - **原因*...
15.12 设置textarea中的图片不处于编辑状态 15.13 禁止图像的拷贝 15.14 LOGO像雪花一样落下 15.15 多幅图片分页滚动显示 15.16 循环滚动显示图片 15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传...
15.12 设置textarea中的图片不处于编辑状态 15.13 禁止图像的拷贝 15.14 LOGO像雪花一样落下 15.15 多幅图片分页滚动显示 15.16 循环滚动显示图片 15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传...