宽度为<时禁用jquery脚本;x像素.响应式菜单

Question

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

这个想法是有一个固定的菜单顶部没有标题标志的移动版本。当在移动设备上（<900px）时，它的作用与桌面相同。这就是我试图避免的。

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

代码：

$(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");
});

Answer 2

仅为您所需的分辨率范围定义".fastMeny"类。

@media only screen and (min-width : 900px) {
    .fastMeny{
         ...
    }
}

这样可以避免不必要的jQuery.resize（）侦听器，同时保持.scroll（）侦听程序的简单性。

额外小费：

将$（".meny"）存储在一个变量中，这样您就不必在再次滚动时选择它。

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