Вимкнути скрипт jquery, коли ширина - <x px. Відповідне меню - jquery, html, css

Код, який у мене є, працює в режимі робочого столу, але я хочу відключити його, коли розмір екрана менше 900 пікселів.

Ідея - мати фіксовану верхню частину меню без логотипу заголовка для мобільної версії. Коли на мобільному телефоні (<900 пікселів), це робиться так само, як і на робочому столі. Цього я намагаюся уникати.

Сподіваюся, ви зможете вказати мене в правильному напрямку!

Код:

$(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{
...
}
}

Таким чином ви уникаєте зайвого слухача 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");
}
});