JavaScript前端——小广告固定相对页面位置不变（window事件）笔记（一）

最新推荐文章于 2023-02-02 08:53:44 发布

普通の喵

最新推荐文章于 2023-02-02 08:53:44 发布

阅读量666

点赞数

分类专栏： JavaScript 文章标签： javascript css html html5

本文链接：https://blog.csdn.net/Kalolai/article/details/117995882

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

吸顶广告效果：小广告固定在页面顶端，随着翻页相对页面位置不变

HTML部分——插入一张图片（小广告）用css设置其大小及位置

<img src="imge/t1.jpg" id="ad"
			style="position:absolute; left: 0px;top:0px;z-index: 1; width: 100px;height: 50px;">
		<div id="" style="height: 1500px;background-color: lightblue;">
		</div>

JS部分

//window对象事件之onscroll事件
			//小广告固定在页面顶端，随着翻页相对页面位置不变
			//			window.onresize=function(){
			//				alert("调整打消了！")
			//			}
			window.onload = function() {
				var a = document.getElementById("ad");
				window.onscroll = function() {
					a.style.top = window.scrollY + "px";
					a.style.left = window.scrollX + "px";
				}
			}

效果图：

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload() 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。——菜鸟教程

（详情参考：https://www.runoob.com/w3cnote/javascript-window-onload.html）

普通の喵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript前端——小广告固定相对页面位置不变（window事件）笔记（一）

吸顶广告效果：小广告固定在页面顶端，随着翻页相对页面位置不变HTML部分——插入一张图片（小广告）用css设置其大小及位置<img src="imge/t1.jpg" id="ad" style="position:absolute; left: 0px;top:0px;z-index: 1; width: 100px;height: 50px;"> <div id="" style="height: 1500px;background-color: lightblue
复制链接

扫一扫