用scrollTop实现让一个div始终显示在页面的某个地方

最新推荐文章于 2023-03-07 14:32:45 发布

alm1968

最新推荐文章于 2023-03-07 14:32:45 发布

阅读量219

点赞数

原文链接：http://www.cnblogs.com/xiamigongcheng/archive/2012/08/08/2628563.html

版权

　　首先我要实现的效果是：不管浏览器的滚动条如何滚动，div始终在页面的某个位置不随滚动条的滚动而改变，这里只使用浏览器的Y轴滚动条。

要实现这个效果思路其实很简单，首先我要确定浏览器在静态时div在页面的位置（即页面距离浏览器窗口的顶部距离theTop），然后随着滚动条的滚动，我需要随时获取滚动值scrollTop，将两者相加，就可以实现想要的效果。

CSS部分：

View Code

1 #con{width:300px;height:100px;border:1px red solid;position:absolute;top:150px;}

HTML部分：

View Code

1 <body style="height:1000px;">
2 <div id="con">
3 </div>

JS部分：

View Code

 1 <script>
 2 var tips; //声明变量
 3 var theTop = 150;//获取静态时div距离浏览器窗口顶端的距离
 4 function initFloatTips() 
 5 { 
 6  tips = document.getElementById('con');//通过ID获取div
 7  moveTips();//执行移动函数
 8 }
 9 function moveTips()
10 {
11 /*实现浏览器兼容，pos为实时获取的scrollTop值*/
12    if (window.innerHeight)                                                                                                        
13    {
14     pos = window.pageYOffset ;   }else if (document.documentElement && document.documentElement.scrollTop) {
15    pos = document.documentElement.scrollTop; 
16    }else if (document.body) {
17   pos = document.body.scrollTop;  
18    }
19 //
20     pos=pos+theTop;//实现div始终在页面的某个位置
21     tips.style.top = pos+"px";
22     setTimeout(moveTips,10);//设置监听器，隔10毫秒监听一次
23 }
24 initFloatTips();//执行函数
25 </script>

　　值得注意的一点是： pos=pos+theTop;获取的只是一个值，不是浏览器可以是别的具体的像素值，所以后面需要将这个值转化成浏览器可以识别的像素值，不可落下！

转载于:https://www.cnblogs.com/xiamigongcheng/archive/2012/08/08/2628563.html

alm1968

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用scrollTop实现让一个div始终显示在页面的某个地方

　　首先我要实现的效果是：不管浏览器的滚动条如何滚动，div始终在页面的某个位置不随滚动条的滚动而改变，这里只使用浏览器的Y轴滚动条。要实现这个效果思路其实很简单，首先我要确定浏览器在静态时div在页面的位置（即页面距离浏览器窗口的顶部距离theTop），然后随着滚动条的滚动，我需要随时获取滚动值scrollTop，将两者相加，就可以实现想要的效果。CSS部分：...
复制链接

扫一扫