版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lyxuefeng/article/details/81843091
效果：页面有滚动条，当移动滚动条时，保持广告在页面左(右)侧位置不变
思路：当window触发onscroll事件时，使用定时器使广告跟随移动
关键知识：onscroll,setInterval
具体代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>侧边栏广告跟随</title>
<style>
img{
position: absolute;
left:0;
top:100px;
}
#demo{
width:1000px;
margin:0 auto;
}
</style>
</head>
<body>
<img src="images/aside.jpg" alt="" id="pic"/>
<div id="demo">
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
</div>
</body>
<script src="my.js" type="text/javascript"></script>
<script>
var pic = $('pic');
var picTop = pic.offsetTop;
var timer = null;
var leader = 0,target = 0;
window.onscroll = function(){
var scrollTop = scroll().top;
// console.log(scrollTop);
clearInterval(timer);
target = scrollTop + picTop;
timer = setInterval(function(){
leader = leader + (target - leader)/10;
pic.style.top = leader + "px";
},20)
}
</script>
</html>my.js代码：
function $(id){
return document.getElementById(id);
}
function scroll(){
if(window.pageYOffset != null){
//ie9+和各种最新浏览器，注意：为什么使用！=null,因为加载完页面pageYOffset就是0
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){
//不是怪异模式(即声明了DTD)
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}else{
//怪异模式(未声明DTD)
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
}具体效果可见：页面广告跟随