监听滚动停止

用户悬停 侧边栏消失

    <style>
        * {
            padding: 0;
            margin: 0;
        }
    
        .warp_b {
            width: 100vw;
            height: 2000vh;
        }
    
        .warp_c {
            width: 100vw;
            height: 100vh;
        }
    
        .sidebar {
            width: 100px;
            height: 200px;
            position: fixed;
            right: 0;
            top: 20%;
            background: #ccc;
            text-align: center;
            transform: translateX(100%);
        }
    
        .sidebar.sidebarShow {
            transform: translateX(0);
        }
    </style>
    <div class="warp_b">
        <div class="kv" style="height: 100px;">kv</div>
        <div class="section9999">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        <div class="warp_c">
            <div class="sidebar">侧边栏</div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            const $ScrollWrap = $(window)
            // 监听滚动停止
            let t1 = 0;
            let t2 = 0;
            let timer = null; // 定时器
            $ScrollWrap.on("touchstart", function () {
                // 触摸开始 ≈ 滚动开始
                console.log("滚动开始")
            })

            $ScrollWrap.on("scroll", function () {
                if($(window).scrollTop() > $(".section9999").offset().top){
                    $(".sidebar").addClass("sidebarShow");
                }else{
                    $(".sidebar").removeClass("sidebarShow");
                }
                // 滚动
                clearTimeout(timer)
                timer = setTimeout(isScrollEnd, 1000)

                console.log(timer)
                t1 = $ScrollWrap.scrollTop()
            })
            function isScrollEnd() {
                t2 = $ScrollWrap.scrollTop();
                if (t2 == t1) {
                    console.log("滚动停止")
                    $(".sidebar").removeClass("sidebarShow");
                    clearTimeout(timer)
                }
            }
        })
    </script>