Wyłącz skrypt jquery, gdy szerokość jest równa <x px. Responsywne menu - jquery, html, css

Kod, który mam działa dobrze w trybie pulpitu, ale chcę go wyłączyć, gdy rozmiar ekranu jest mniejszy niż 900 pikseli.

Chodzi o to, aby mieć stałe menu bez nagłówka-logo dla wersji mobilnej. Na urządzeniach mobilnych (<900px) robi to samo, co na komputerze. Właśnie tego próbuję uniknąć.

Mam nadzieję, że możesz wskazać mi właściwy kierunek!

Kod:

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

Odpowiedzi:

Prawdopodobnie najbardziej rozsądnym rozwiązaniem byłoby zbudowanie innego menu, tylko na telefony komórkowe, zamiast robić włamania za pomocą JavaScript. Menu miałoby inną klasę niż ta, którą masz (meny).

Następnie użyj zapytań o media CSS, aby wskazać, które menu jest wyświetlane, a które ukryte. A ponieważ menu mobilne ma inną nazwę klasy, dodanie / usunięcie części klasy nie będzie miało na nią wpływu.

Jeśli nadal chcesz to zrobić za pomocą JS, możesz nieco zmodyfikować skrypt, aby nie działał na małych ekranach:

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

});

Zdefiniuj klasę „.fastMeny” tylko dla żądanego zakresu rozdzielczości.

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

W ten sposób unikniesz niepotrzebnego detektora jQuery .resize (), jednocześnie utrzymując prostotę detektora .scroll ().

Dodatkowa wskazówka:

przechowuj $ („. meny”) w zmiennej, więc nie musisz jej wybierać podczas przewijania od nowa.

var meny = $(".meny");

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