jquery 让div随着滚动条滑动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以轻松实现复杂的 JavaScript 功能。

类型

jQuery 主要分为以下几个类型：

核心：提供基本的工具函数。
选择器：提供强大的选择器功能，方便获取 DOM 元素。
事件：提供丰富的事件处理功能。
动画：提供简单的动画效果。
Ajax：简化 Ajax 操作。

应用场景

jQuery 广泛应用于各种网页开发中，包括但不限于：

动态效果
表单验证
DOM 操作
事件处理
Ajax 数据交互

实现 div 随着滚动条滑动

要让一个 div 随着滚动条滑动，可以使用 jQuery 的 scroll 事件和 animate 方法。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Animation</title>
    <style>
        #scrollDiv {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="scrollDiv"></div>
    <script>
        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();
            $('#scrollDiv').animate({
                top: scrollTop + 'px'
            }, 100);
        });
    </script>
</body>
</html>

解释

HTML 结构：创建一个 div 元素，并赋予其 ID 为 scrollDiv。
CSS 样式：设置 div 的初始位置为绝对定位，背景颜色为红色。
jQuery 代码：
- 使用 $(window).scroll(function() { ... }) 监听窗口的滚动事件。
- 获取当前滚动条的位置 scrollTop。
- 使用 $('#scrollDiv').animate({ top: scrollTop + 'px' }, 100) 动画效果，使 div 的 top 属性随着滚动条的位置变化而变化，动画持续时间为 100 毫秒。