我怎样才能只针对特定宽度激活这个javascript函数？

Question

我有这个 JavaScript 函数，我希望它仅在屏幕最小宽度：1070px 时有效。我能怎么做？我可以使用媒体查询吗？

window.addEventListener('scroll', function() {
    if (window.scrollY > 190) {
        document.getElementById('navbar_top').classList.add('fixed-top');
    } else {
        document.getElementById('navbar_top').classList.remove('fixed-top');
        document.body.style.paddingTop = 170 + 'px';
    }
});

Answer 1

您可以使用 matchMedia 函数在 javascript 中检查媒体查询。

const matches = window.matchMedia("(min-width: 1070px)");
if(matches) {
    // Do your stuff
}

Answer 2

实际上，最简单的方法是使用

fixed-top

类中的媒体查询。它总是会被添加和删除，但是否应用任何样式都在 CSS 规则中处理。

否则，如果出于性能原因并且您不希望处理程序在不需要时运行，则可以使用命名函数来执行此操作，您可以在初始执行时从滚动处理程序中添加/删除该函数，然后在每个窗口上再次添加/删除该函数调整大小。

此外，函数中添加填充的部分没有多大意义，因为 if 条件的另一半不会删除它 - 看起来要么填充应该始终存在，要么您丢失了一些东西