JavaScript 和 jQuery 设置悬浮广告

最新推荐文章于 2025-11-24 02:17:16 发布

最新推荐文章于 2025-11-24 02:17:16 发布 · 65 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用 jQuery 和原生 JavaScript 实现的滚动时固定广告栏的方法。通过获取广告元素的初始位置，并随着页面滚动更新其位置，使广告栏始终保持在用户视线内。此方案兼容多种浏览器，并提供了两种实现方式。

jquery var $a1Top; var $a1Obj; $(document).ready(function(){ $a1Top=$("#ad1").css("top"); }); $(window).scroll(function(){ $("#ad1").css("top", parseInt($a1Top)+$(window).scrollTop()); }); JS var a1Top; var a1Obj; function inix(){ //获取a1Top的高度 a1Obj=document.getElementById("ad1"); if(a1Obj.currentStyle){ a1Top=parseInt(a1Obj.currentStyle.top); } else{ a1Top=parseInt(a1Obj.getComputedStyle(a1obj,null).top); } } function move(){ a1Obj.style.top=a1Top+parseInt(document.documentElement.scrollTop)+"px"; } window.onload=inix; window.onscroll=move;