鼠标的滑轮向下移动,广告不移动的小案例

鼠标的滑轮向下移动,广告不移动的小案例

这个案例需要用到jquery

jquery-3.3.1.js

<!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>

猜你喜欢

转载自blog.csdn.net/stay_hungry_stay/article/details/81189864