jquery 滚动停止事件

基础概念

jQuery滚动停止事件是指在用户停止滚动页面或某个滚动容器时触发的事件。这个事件可以用于在用户停止滚动后执行某些操作，比如加载更多内容、显示固定导航栏等。

类型

jQuery本身并没有直接提供滚动停止事件，但可以通过自定义实现。常见的实现方式有两种：

基于定时器的实现：通过设置一个定时器，在用户滚动时重置定时器，当定时器超时时触发滚动停止事件。
基于节流函数的实现：通过节流函数限制滚动事件的触发频率，当一段时间内没有触发滚动事件时，认为滚动已经停止。

应用场景

加载更多内容：在用户滚动到页面底部时，停止滚动后加载更多内容。
固定导航栏：在用户滚动到一定位置时，显示固定导航栏，当用户停止滚动后保持显示。
滚动动画：在用户停止滚动后，触发某些滚动动画效果。

实现示例

以下是基于定时器实现滚动停止事件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Stop Event</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #content {
            height: 2000px;
            background: linear-gradient(to bottom, #f0f0f0, #ccc);
        }
        #fixed-nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #fff;
            display: none;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div id="fixed-nav">Fixed Navigation</div>
    <div id="content"></div>

    <script>
        var scrollTimeout;

        $(window).on('scroll', function() {
            clearTimeout(scrollTimeout);
            $('#fixed-nav').hide();
            scrollTimeout = setTimeout(function() {
                $('#fixed-nav').show();
            }, 200); // 200ms后认为滚动停止
        });
    </script>
</body>
</html>