Как добавить media query в JS?

Question

[dhat]

Как добавить условие, чтобы этот код срабатывал только лишь при media (min-width: 769px)?

function init() {
  window.addEventListener('scroll', function(e) {
    var header;
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 1,
      header = document.getElementById("name");
    if (distanceY > shrinkOn) {
      header.classList.add("red");
    } else {
      if (header.classList.contains("red")) {
        header.classList.remove("red");
      }
    }
  });
}
window.onload = init();

Answer 1

[iBird Rose]

задать этот класс "red" в css только в media. и больше нигде
тобишь класс будет добавляться всегда. но работать он будет только в нужных разрешениях

Comments

[dhat]

Не знал что так все просто, спасибо)

Answer 2

[Ильдар Гизетдинов]

Если сделать так, то:
1. не повесится лишний обработчик который будет работать абсолютно всегда, даже когда не нужен (тобиш на мобилках)
2. нет необходимости выносить в media (класс не будет вешаться на мобилках), хотя можно и там оставить

function init() {
if (window.innerWidth >= 769) {
  window.addEventListener('scroll', function(e) {
    var header;
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 1,
      header = document.getElementById("name");
    if (distanceY > shrinkOn) {
      header.classList.add("red");
    } else {
      if (header.classList.contains("red")) {
        header.classList.remove("red");
      }
    }
  });
}
}
window.onload = init();

минусом является то, что если вы отлаживаете адаптив путем "растягивания" браузера в разные стороны, для того чтобы код сработал при ресайзе из меньшего к большему (когда страница изначально открылась маленькая), нужно обновлять страницу.

Comments

[dhat]

Спасибо, попробую и так.