jquery广告下跟着页面下拉滑动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。广告跟随页面下拉滑动是一种常见的网页设计技术，用于在用户滚动页面时，使广告元素保持在视口的特定位置。

类型

固定位置：广告始终固定在页面的某个位置，如顶部或底部。
跟随滚动：广告随着页面滚动而移动，保持在视口的特定位置。

应用场景

电商网站：在商品列表页面，广告可以跟随滚动，展示相关促销信息。
新闻网站：在新闻文章页面，广告可以跟随滚动，展示相关广告内容。
视频网站：在视频播放页面，广告可以跟随滚动，展示视频相关的广告。

实现方法

以下是一个简单的示例代码，展示如何使用 jQuery 实现广告跟随页面下拉滑动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广告跟随页面下拉滑动</title>
    <style>
        #ad {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 200px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
        }
        .content {
            height: 2000px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div id="ad">广告</div>
    <div class="content">内容区域</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var ad = $('#ad');
            var adOffset = ad.offset().top;

            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();
                if (scrollTop > adOffset) {
                    ad.css('position', 'fixed');
                    ad.css('top', '20px');
                } else {
                    ad.css('position', 'absolute');
                    ad.css('top', adOffset + 'px');
                }
            });
        });
    </script>
</body>
</html>