星空网 > 软件开发 > Java

固定在网页顶部跟随滚动条滑动而滑动的DIV层

在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置

体验效果:http://hovertree.com/texiao/jsstudy/1/

代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JavScript页面悬浮框- 何问起</title><base target="_blank" /><style>body {height: 2000px;}#div1 {width: 100px;height: 150px;background: red;position: absolute;right: 0;top:200px;}#div2 {width: 200px;height: 200px;background: green;position: absolute;left: 0;top: 200px;}a{color:white}</style></head><body><div id="div1"><a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/texiao/">特效</a></div><div id="div2"><a href="http://hovertree.com/h/bjaf/mbrpxe4o.htm">原文</a><a href="http://hovertree.com/texiao/jsstudy/1/">效果</a></div><div id="hovertree" style="position:fixed;top:100px;left:40%;z-index:99;height:100px;width:100px;background-color:silver"></div><div>在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置</div><script>var h_div1 = document.getElementById('div1'), h_div2 = document.getElementById('div2');var h_hvttop = 200;window.onscroll = function () {HoverTreeMove(h_div1, h_hvttop)HoverTreeMove(h_div2, h_hvttop)//显示信息var h_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动的距离var h_hovertree = document.getElementById('hovertree'); h_hovertree.innerHTML = h_div1.offsetTop + " hovertree<br /> " + h_scrollTop + "<br />" + h_div1.style.top;};function HoverTreeMove(obj,top){var h_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动的距离var h_buchang = 20;if (obj.offsetTop < h_scrollTop + top - h_buchang){obj.style.top = obj.offsetTop + h_buchang + "px";setTimeout(function () { HoverTreeMove(obj, top); }, 80);}else if (obj.offsetTop > h_scrollTop + top + h_buchang){obj.style.top = (obj.offsetTop - h_buchang) + "px";setTimeout(function () { HoverTreeMove(obj, top); }, 80);}else {obj.style.top = h_scrollTop + top + "px";}}HoverTreeMove(h_div1, 200)HoverTreeMove(h_div2, 200)</script></body></html>

开发技术文章收集 http://www.cnblogs.com/sosoft/p/kaifajishu.html




原标题:固定在网页顶部跟随滚动条滑动而滑动的DIV层

关键词:div

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

外贸认知误区:https://www.goluckyvip.com/tag/13708.html
红人KOL营销:https://www.goluckyvip.com/tag/13709.html
线上买家猛涨:https://www.goluckyvip.com/tag/1371.html
汇率破七:https://www.goluckyvip.com/tag/13710.html
深圳跨境大卖:https://www.goluckyvip.com/tag/13711.html
华凯创意:https://www.goluckyvip.com/tag/13712.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流