如何在jQuery滚动事件代码中添加屏幕宽度>768px的条件判断？

嘿，这事儿很容易搞定，直接把屏幕宽度的判断逻辑嵌套到滚动事件的回调里就行——这样每次触发滚动时，都会先检查当前屏幕宽度是否大于768px，只有满足条件才会执行导航栏的样式切换操作。

整合后的完整代码如下：

$(window).on('scroll', function () {
    // 先判断屏幕宽度是否符合要求
    if ($(window).width() > 768) {
        if ($(window).scrollTop() > 75) {
            $('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
        } else {
            $('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
        }
    }
});

额外优化建议 #

如果希望用户调整窗口大小后（比如把窄屏幕拉宽到768px以上），导航样式能及时适配，建议把样式更新的逻辑抽成独立函数，同时监听scroll和resize事件，这样体验会更流畅：

// 抽离样式更新逻辑为单独函数
function updateNavigationStyle() {
    if ($(window).width() > 768) {
        if ($(window).scrollTop() > 75) {
            $('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
        } else {
            $('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
        }
    } else {
        // 可选：屏幕宽度≤768px时，重置导航栏样式（根据需求调整）
        $('#anim-nav').removeClass('bg-fill black').addClass('white');
    }
}

// 页面初始化时先执行一次，避免样式延迟
updateNavigationStyle();

// 同时监听滚动和窗口大小变化事件
$(window).on('scroll resize', updateNavigationStyle);

这个优化版本不仅能处理滚动场景，还能应对窗口尺寸变化的情况，逻辑也更清晰易维护~

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