如何实现滚动高度≥500px时切换导航菜单的类？

现有一段jQuery代码实现滚动时隐藏和显示菜单，想要达成仅当页面滚动高度≥500px时，才切换导航的nav-on和nav-off类的效果，尝试添加if(scroll >= 500)判断但未生效，请问该如何修改代码？

原代码如下：

jQuery(document).ready(function( $ ) {
    // console.log($);
    var lastScrollTop = 200;

    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if (st > lastScrollTop){
            $('nav').addClass('nav-off');
            $('nav').removeClass('nav-on');
        } else {
            $('nav').addClass('nav-on');
            $('nav').removeClass('nav-off');
        }
        lastScrollTop = st;
    });
});

解决方案 #

核心思路是先判断滚动高度是否≥500px，只有满足这个条件时，才执行滚动方向判断和类切换逻辑；如果滚动高度小于500px，直接给导航加上nav-on类（保持显示状态）。

修改后的代码：

jQuery(document).ready(function( $ ) {
    var lastScrollTop = 200;

    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        
        // 仅在滚动高度≥500px时执行类切换逻辑
        if (st >= 500) {
            if (st > lastScrollTop) {
                // 向下滚动：添加隐藏类，移除显示类
                $('nav').addClass('nav-off').removeClass('nav-on');
            } else {
                // 向上滚动：添加显示类，移除隐藏类
                $('nav').addClass('nav-on').removeClass('nav-off');
            }
        } else {
            // 滚动高度不足500px时，强制显示导航
            $('nav').addClass('nav-on').removeClass('nav-off');
        }
        
        lastScrollTop = st;
    });
});

关键修改点说明： #

• 在外层增加st >= 500的判断，把原有的滚动方向逻辑包裹进去，确保只有满足高度条件才触发类切换。
• 当滚动高度小于500px时，直接重置导航为nav-on状态，避免页面顶部出现异常的隐藏状态。
• 优化了类操作，用链式调用addClass().removeClass()让代码更简洁。

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