1

Gostaria de adicionar uma classe quando a viewport for menor que 899px e remover quando a viewport for maior que isso.

A principio meu código funcionou, mas sem remover a classe quando a viewport aumenta.

$(window).resize(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 800) {
            document.querySelector('.layout-fixed-header').classList.add("layout-small-menu");
    }
});

Qual seria a melhor maneira de montar esse código?

1 Resposta 1

3

Sempre que puderes faz cache dos elementos que vais buscar com document.querySelector, especialmente dentro de um .resize() isso pode pesar o browser.

A minha sugestão seria fazer isso com CSS somente... usando media queries:

@media screen and (min-width: 801px) {
  .layout-small-menu {
    background-color: blue;
  }
}

@media screen and (max-width: 800px) {
  .layout-small-menu {
    background-color: olive;
  }
}

Mas para responder à tua pergunta podias fazer assim:

var fixedHeader = document.querySelector('.layout-fixed-header');
$(window).resize(function() {
  var viewportWidth = $(window).width();
  fixedHeader.classList.toggle("layout-small-menu", viewportWidth < 800);
});

Neste caso usei o .toggle() que adiciona ou remove a classe consoante o valor do segundo argumento que lhe é passado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .