HelenStar
@HelenStar
Начинающий frontend

Как сделать выполнение скрипта только при определенном разрешении?

Есть такой код для мобильного меню, чтобы оно закрывалось при клике по одному из его пунктов:

$(('a[name=link]')).on('click', function() {
$('.main-nav').fadeOut();
$('.overlay').fadeOut();
});

Проблема в том, что меню у меня одно для декстопной и для мобильной версии (в мобильной отображение перестраивается средствами flexbox). Следовательно, по этой причине этот скрипт будет скрывать меню при клике по ссылке и не в мобильной версии тоже. Пробовала решить проблему следующим образом:

if(window.innerWidth < 450){
$(('a[name=link]')).on('click', function() {
$('.main-nav').fadeOut();
$('.overlay').fadeOut();
});
};

Скрипт выполняется, но с одним НО! При ресайзе обратно в декстоп меню так и не появляется. Пробовала добавлять что-то вроде:

if(window.innerWidth > 450){
$('.main-nav').fadeIn();
$('.overlay').fadeOut();
};

чтобы при обратном увеличении экрана меню снова появлялось. Работает, но тогда не работает первый скрипт, то есть if(window.innerWidth < 450).

Какие еще способы есть заставить работать эту часть кода при нужном разрешении так, чтобы при ресайзе обратно все становилось на свои места? Особенно это актуально при повороте экрана, потому что на смартфоне при повороте отрабатывает декстопная версия.
  • Вопрос задан
  • 3771 просмотр
Пригласить эксперта
Ответы на вопрос 2
@mrxakerrus
Мне кажется лучше для таких целей использовать CSS и media query, там тебе и разрешение изменять и ориентацию и форм-фактор
Ответ написан
Ankhena
@Ankhena Куратор тега JavaScript
Нежно люблю верстку
Проверяйте при ресайте тоже, а не только при загрузке
$(window).resize(function() {...})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы