如何仅在屏幕最小宽度1070px时激活指定JavaScript函数？

你遇到的核心问题是：小屏幕下没有navbar_top元素，但滚动事件仍会执行else分支的padding设置，同时需要让整个滚动逻辑仅在屏幕≥1070px时生效。可以通过「媒体查询JS API」+「元素存在性检查」来解决，具体如下：

方法一：基础版（屏幕宽度直接判断） #

在滚动事件里先做屏幕宽度校验，同时提前获取元素并检查是否存在，避免控制台报错：

window.addEventListener('scroll', function() {
    // 仅在屏幕宽度≥1070px时执行后续逻辑
    if (window.innerWidth < 1070) {
        // 小屏幕下重置body的paddingTop，清除残留样式
        document.body.style.paddingTop = '';
        return;
    }

    const navbarTop = document.getElementById('navbar_top');
    // 确保元素存在再进行操作
    if (!navbarTop) return;

    if (window.scrollY > 190) {
        navbarTop.classList.add('fixed-top');
        // 导航栏固定后，可根据需求移除body的padding（避免重复占位）
        document.body.style.paddingTop = '';
    } else {
        navbarTop.classList.remove('fixed-top');
        document.body.style.paddingTop = '170px';
    }
});

方法二：更优雅的媒体查询API版 #

使用window.matchMedia()监听媒体查询变化，不仅滚动时会判断，窗口大小改变时也能自动适配，逻辑和CSS媒体查询完全同步：

// 定义和CSS一致的媒体查询条件
const mediaQuery = window.matchMedia('(min-width: 1070px)');

// 把滚动逻辑封装成单独函数，方便复用
function handleScrollAndResize() {
    if (!mediaQuery.matches) {
        document.body.style.paddingTop = '';
        return;
    }

    const navbarTop = document.getElementById('navbar_top');
    if (!navbarTop) return;

    if (window.scrollY > 190) {
        navbarTop.classList.add('fixed-top');
        document.body.style.paddingTop = '';
    } else {
        navbarTop.classList.remove('fixed-top');
        document.body.style.paddingTop = '170px';
    }
}

// 绑定滚动事件
window.addEventListener('scroll', handleScrollAndResize);
// 绑定窗口大小变化时的媒体查询监听
mediaQuery.addEventListener('change', handleScrollAndResize);
// 页面加载时先执行一次，确保初始样式正确
handleScrollAndResize();

关键修复说明 #

• 屏幕宽度拦截：将所有navbar_top相关逻辑限制在min-width:1070px的条件内，小屏幕下直接重置body的padding，避免无效样式残留。
• 元素存在性校验：每次操作前先获取元素并判断是否存在，防止因元素不存在导致的控制台报错。
• 媒体查询API：相比直接判断window.innerWidth，matchMedia能同步CSS的媒体查询规则，还支持监听宽度变化，适配更灵活。

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