Question

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

这个想法是有一个固定的菜单顶部没有移动版的标题标志。在移动设备上（＆lt; 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");
    }
});

当宽度为＆lt;时，禁用jquery脚本x px。响应式菜单

2 个答案: