JavaScript宽度检查以禁用事件

Question

我有一些代码可以在某个页面滚动点添加一个类，这是我在特定情况下所需要的，但是我不需要在移动设备上使用它。

$(window).scroll(function() {
    if ($(".navbar").offset().top > 500) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

我可以将它与类似...

function checkWidth() {
    if ($(window).width() < 514) {
        $('#menu2').addClass('f-nav');
    } else {
        $('#menu2').removeClass('f-nav');
    }
}

$(window).resize(checkWidth);

要说切换课程，但仅当宽度大于480px时？

我很欣赏这可能是新手，但我想知道窗口滚动功能是否只是if条件的一部分？

Answer 1

如果将条件检查放在事件侦听器上，而不是在事件侦听器上进行操作，则可以在移动设备上节省一些资源，同时还能完成任务。

尝试：

if ($(window).width() > 514) {
    $(window).scroll(function() {
        if ($(".navbar").offset().top > 500) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
    });
}

通过在应用事件侦听器之前进行条件检查，您无需在移动设备上添加事件侦听器并节省其将要使用的资源。 这也使您不必在功能中添加任何条件逻辑，因为在不将滚动侦听器应用于小于514px的设备上的情况下不会调用该条件逻辑。

Answer 2

试试这个小提琴： https : //jsfiddle.net/cxn6t946/

您需要将if ($(window).width() > 514)放在scroll功能内，它将起作用。

编辑我的答案，因为先前的小提琴有问题。 在大于514的场景中效果很好，在offset>500添加了top-nav-collapse 。 但是，当返回屏幕尺寸小于514时， top-nav-collaspe类仍然存在。 因此必须通过合并resize来重写小提琴。

查看更新的小提琴： https : //jsfiddle.net/cxn6t946/1/

希望这可以帮助。