幅が<x pxの場合、jqueryスクリプトを無効にします。レスポンスメニュー - jquery、html、css

デスクトップモードでは正常に動作しますが、画面サイズが900px未満の場合は無効にしたいと考えています。

アイデアは、モバイル版のヘッダーロゴのない固定メニュートップを持つことです。モバイルの場合（<900px）、デスクトップと同じ動作をします。これは私が避けようとしているものです。

あなたが正しい方向に私を指すことができることを願っています！

コード：

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

回答：

おそらく最も合理的な解決策は、JavaScriptを使ってハックするのではなく、携帯電話のためだけに別のメニューを作成することです。メニューは、あなたが持っているものとは異なるクラス（meny）を持つでしょう。

次に、CSSのメディアクエリを使用して、表示されているメニューと表示されていないメニューを指定します。あなたのモバイルメニューは異なるクラス名を持っているので、クラスの追加/削除の影響を受けません。

それでもJSでやりたいのであれば、スクリプトを少し変更して、小さな画面では動かないようにすることができます：

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

});

あなたの望む解像度範囲に対してのみ ".fastMeny"クラスを定義してください。

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

そうすれば、.scroll（）リスナーをシンプルに保ちながら、不要なjQuery .resize（）リスナーを避けることができます。

追加Tipp：

変数に$（ "。meny"）を格納するので、もう一度スクロールしながらそれを選択する必要はありません。

var meny = $(".meny");

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