当前位置:首页 > 全栈分享 > JavaScript > 正文
如何让一个div块在页面滚动到其出现之后在当前窗口的位置不再发生变化
发布时间:2018-03-15 21:31:56作者:魏义齐阅读:()评论:
当个人站长明白情怀换不来钱也不能成为坚持下去的强大动力之后,联盟广告赚钱就变成了所有人的期望,利益最大化是人类一直的追求,就像一个广告位不管页面滚动到哪都要展现在访问者面前一样。
实现js代码如下:
- <script type="text/javascript">
- window.onload =
- function () {
- var oDiv = document.getElementById("ggw"),
- H = 0,
- Y = oDiv
- while (Y) {
- H += Y.offsetTop;
- Y = Y.offsetParent
- }
- window.onscroll = function () {
- var s = document.body.scrollTop || document.documentElement.scrollTop
- if (s > H) {
- oDiv.style = "position:fixed;top:90px;"
- } else {
- oDiv.style = ""
- }
- }
- }
- </script>
“ggw”为广告所在盒子的名称,top后的值是距离当前窗口顶部的距离,效果看右侧广告。
对于菜鸟来说你可以研究一下这段js代码的写法,对于大神来说这段js代码也不是让你说“小儿科”的,而是让你在需要的时候直接Ctrl+C。
相关阅读
-
无相关信息
上一篇:表单验证常用的正则表达式下一篇:随页面滚动动态加载内容的实现方法
收起二维码
原创不易,您的赞助就是博主更新的动力!
![](https://blog.weiyiqi.net/skin/weiyiqi/images/erweimask.png)
赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。
完全自托管的评论系统
最新会员
-
东方星雨
-
deanhan
-
1264822519
-
aini3311
-
a1051020101
-
weiyiqi
- 网站防扒的一般措施(2501)
- js实现刷新页面所有微信号同步变化的效果(1772)
- 网站通用使文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的方法(1261)
- 用swiper4给博客首页配置的一个3D方块切换轮播图(1027)
- 随页面滚动动态加载内容的实现方法(972)
- 打开页面自动滚动到指定位置的实现方法(930)
- 点击文字即可将文字复制到粘贴板的实现方法(927)
- slide Toggle()方法如何先后执行两次(619)
- 生日选择代码(586)
- 屏蔽终端的js代码(580)
- js给文章外链添加rel="nofollow",内链则自动排除(2022-01-08)
- 给文章代码高亮模块增加一键复制功能(2021-08-23)
- jQuery解决谷歌广告不显示但使打底广告无法点击问题(2021-08-12)
- 网站通用使文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的方法(2019-06-10)
- 用swiper4给博客首页配置的一个3D方块切换轮播图(2018-10-29)