宽度<x px时禁用jquery脚本。响应式菜单

我的代码在桌面模式下工作正常，但是我想在屏幕尺寸小于900像素时将其禁用。宽度<x px时禁用jquery脚本。响应式菜单

这个想法是有一个固定的菜单顶部没有移动版本的标题标志。在移动时（< 900px），它和桌面一样。这是我想要避免的。

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

代码：

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

来源

2013-11-20 Lars Harald

你可以创建小提琴吗？ –

如果仅用于设计目的，您应该使用CSS3媒体查询 –

这里是一个小提琴。如果太杂乱和不清楚，我的第一个非常抱歉。试着发表一点评论。 http://jsfiddle.net/larshjk/sxrmH/ @MilindAnantwar –

可能是最合理的解决方案是建立另一个菜单，只为手机，而不是用JavaScript做黑客。菜单会有一个不同于你有的（meny）。

然后，只需使用CSS媒体查询来表示哪个菜单显示，哪个隐藏。而且由于你的手机菜单有不同的类名，所以它不会受到你的添加/删除类部分的影响。

如果你还是想用JS做到这一点，你可以修改你的脚本一点，使其不小的屏幕工作：

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

});

来源

2013-11-20 14:44:02 Shomz

我想这可能是个好主意！谢谢，需要一些时间，但也许这是最好的解决方案。 @Shomz –

我不想特意给你任何代码 - 这是一件了不起的事情要知道，你会更好地学习它，而不是从这里复制代码。我希望这是有道理的。 – Shomz

没问题！我仍然在学习，有很多方法可以做事。这个想法是最有帮助再次感谢！ –

定义“.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"); 
    } 
});

来源

2013-11-20 14:53:50 lookaze

宽度<x px时禁用jquery脚本。响应式菜单

回答

相关问题