scrollTop()结合slideDown()无法正常工作问题排查

Hey there, let's fix that scroll-based nav issue you're having! The main problems with your original code are unclear nested ternary logic, missing edge case handling (like when you scroll back to the top), and potentially too frequent scroll event triggers. Here's a cleaned-up, working version:

完整修复代码 #

<div class="baseNav">Your navigation content here</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    const senseSpeed = 2;
    let prevScroll = $(window).scrollTop();
    const nav = $(".baseNav");
    
    // 节流函数，减少滚动事件触发频率
    function throttle(func, delay) {
        let timer = null;
        return function() {
            const context = this;
            const args = arguments;
            if (!timer) {
                timer = setTimeout(function() {
                    func.apply(context, args);
                    timer = null;
                }, delay);
            }
        };
    }

    function handleScroll() {
        const currentScroll = $(window).scrollTop();
        
        // 页面回到顶部时，强制显示导航
        if (currentScroll === 0) {
            if (!nav.is(":visible")) {
                nav.stop(true, true).slideDown();
            }
            prevScroll = currentScroll;
            return;
        }

        // 判断滚动方向（加入senseSpeed过滤微小滚动）
        const isScrollingDown = currentScroll > prevScroll + senseSpeed;
        const isScrollingUp = currentScroll < prevScroll - senseSpeed;

        if (isScrollingDown && nav.is(":visible")) {
            // 向下滚动且导航可见时，隐藏
            nav.stop(true, true).slideUp();
        } else if (isScrollingUp && !nav.is(":visible")) {
            // 向上滚动且导航隐藏时，显示
            nav.stop(true, true).slideDown();
        }

        prevScroll = currentScroll;
    }

    // 绑定节流后的滚动事件，避免频繁触发
    $(window).scroll(throttle(handleScroll, 100));
});
</script>

关键修改说明 #

• 替换嵌套三元为清晰的if/else：原代码的三元嵌套逻辑晦涩，容易出现判断漏洞，改用直白的条件分支后更易维护调试。
• 处理顶部边界情况：当滚动到页面最顶部时，强制显示导航栏，符合用户回到顶部时需要操作导航的预期。
• 优化动画控制：使用stop(true, true)清除之前的动画队列并直接跳到动画结束状态，避免多次滚动导致的动画堆积、卡顿问题。
• 添加节流函数：滚动事件会每秒触发数十次，节流能限制函数执行频率，大幅提升页面性能。
• 精准判断滚动方向：通过senseSpeed过滤微小的滚动波动，避免手指抖动或页面微小偏移触发不必要的显示/隐藏动画。

替换掉你原来的JS代码后，测试一下滚动效果，应该就能正常工作了！

内容的提问来源于stack exchange，提问作者user9691116