html
——————————————————————————————————————————————————————————————————————————————————————
<!DOCTYPE html>
<html>
<head>
???<meta charset="UTF-8">
???<script src="../js/jquery-3.2.1.min.js"></script>
???<link rel="stylesheet" href="../css/JQ08_24_02.css">
???<title>对联广告</title>
</head>
<body>
<div class="adsOnTheLeft"></div>
<div class="adsOnTheRight"></div>
<script src="../js/JQ08_24_02.js"></script>
</body>
</html>
css
——————————————————————————————————————————————————————————————————————————————
*{margin: 0;padding: 0}
body{
???height: 2000px;
}
body>div{
???width: 100px;
???height: 300px;
???border: 1px solid #666;
???background: #ccc;
???margin: 0 20px;
???position: absolute;
???top:60px;
???transition: top .6s ease;
}
.adsOnTheLeft{
???left: 20px;
}
.adsOnTheRight{
???right: 20px;
}
js
——————————————————————————————————————————————————————————————————————————————$(function () {
???function move() {
???????//保存当前滚动条高度
???????var adsHeight = $(window).scrollTop();
???????// 设置高度
???????$(".adsOnTheLeft").offset({top:100+adsHeight});
???????$(".adsOnTheRight").offset({top:100+adsHeight});
???}
???var setIn = window.setInterval(move,100)
});JQuery对联广告
原文地址：http://www.cnblogs.com/AgilityJin/p/7425821.html