鼠标的滑轮向下移动,广告不移动的小案例
这个案例需要用到jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
body{
display:flex;
margin: 0;
}
.box{
cursor: pointer;
width: 100px;
height: 100px;
background: green;
border: 1px solid #aaa;
border-radius: 8px;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 24px;
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body style="height: 3000px;">
<div class="box animate swing">我是广告</div>
<script>
$(function(){
var t = $('.box').offset().top;
$(document).scroll(function(){
var l = $(document).scrollTop();
$(".box").css('top',t+l);
})
})
</script>
</body>
</html>