jQuery: функция обновления для изменения размера окна в особом случае

Question

Я хотел бы вставить нижний колонтитул непосредственно под навигацию, если размер окна меньше ширины 1000px и высоты 500px. В общем, все работает так, как я его кодировал.

Но: Не обновляется, если размер окна изменяется. Если страница загружается под этой точкой останова, а #footer находится под #navigation, она также должна вернуться в обычный режим, если размер окна достигает более 1000 пикселей в ширину и 500 пикселей в высоту.

Это код:

const mq = window.matchMedia("(min-width: 1000px) and (max-height: 500px)");

if (mq.matches) {
  $("#footer").insertAfter("#navigation");
}
}

Оооочень благодарен за помощь.

Answer 1

Что вам нужно сделать, это поместить код, который вы уже написали, в функцию, связанную с событием window.onresize.

window.onresize = Resize;
window.onload = Resize;

function Resize(){
    let mq = window.matchMedia("(min-width: 1000px) and (max-height: 500px)");

    if (mq.matches) {
        $("#footer").insertAfter("#navigation");
    }
    else{
        // Your code to place the footer where it's needed
    }
}

Это будет запускать медиазапрос, который вы написали каждый раз, когда страница * 1004 с новым размером *