jquery - 当宽度小于 x 像素时禁用 jquery 脚本。响应式菜单

Question

我的代码在桌面模式下运行良好，但我想在屏幕尺寸小于 900px 时禁用它。

想法是为移动版本提供一个没有标题 Logo 的固定菜单顶部。在移动设备上(<900 像素)，它与桌面设备相同。这是我要避免的。

希望你能给我指明正确的方向!

代码:

$(window).scroll(function () {
    if ($(window).scrollTop() > 180) {
        $(".meny").addClass("fastMeny");
    } else if ($(window).scrollTop() < 180) {
        $(".meny").removeClass("fastMeny");
    }
});

Answer 1

可能最合理的解决方案是构建另一个菜单，只针对移动设备，而不是使用 JavaScript 进行修改。菜单的类别与您拥有的类别不同(meny)。

然后只需使用 CSS 媒体查询来表示显示哪个菜单和隐藏哪个菜单。由于您的移动菜单具有不同的类名，因此它不会受到您添加/删除类部分的影响。

如果你仍然想用 JS 来做，你可以稍微修改你的脚本，让它在小屏幕上不起作用:

$(window).scroll(function () {
    if (window.screen.width < 900)
        return;
    if ($(window).scrollTop() > 180)
        $(".meny").addClass("fastMeny");
    else
        $(".meny").removeClass("fastMeny");

});