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

最新推荐文章于 2024-08-14 17:15:24 发布

原创最新推荐文章于 2024-08-14 17:15:24 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端

关于前端的技术探讨同时被 2 个专栏收录

28 篇文章

订阅专栏

前端

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的案例，使页面中的广告框随着滚动条的移动而保持在固定位置。通过获取广告框的初始位置并监听滚动事件，实时调整广告框的位置，使其在用户滚动页面时始终保持可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这个案例需要用到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>