Как в реальном времени обновлять CSS в зависимости от размера экрана, используя JQuery?

Question

Я извлек фрагмент JS из ответа на: Как сделать так, чтобы содержимое отображалось под фиксированным элементом DIV?

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

В настоящее время у меня есть это:

$(document).ready(function() {
  var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
  $('body').css('margin-top',contentPlacement);
  $('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
});

Есть ли способ динамически изменять выводимый CSS в момент обновления размера экрана?Это также будет полезно при разработке сайта.

Это будет для отображения контента на моей странице под фиксированным меню.

ОБНОВЛЕНИЕ

Образец сайта находится здесь: http://wp19.knowgreaterpartnership.com/

Answer 1

В дополнение к функции обратного вызова ready вы также можете использовать jquery.resize .Вы просто должны выполнить тот же код для обратного вызова resizeResize будет вызываться каждый раз, когда изменяется размер окна.

Ради меньшей избыточности кода я ввел новый метод adjustContent:

$(document).ready(adjustContent);

$(window).resize(adjustContent);

function adjustContent() {
    var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
    $('body').css('margin-top',contentPlacement);
    $('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
}

Answer 2

Я знаю, что вы спрашиваете об использовании jQuery для изменения CSS, но на самом деле вы должны использовать Media Queries для вашего css, чтобы он был декларативным вместо инициируемого сценария / события.

Пример: (https://www.w3schools.com/Css/css3_mediaqueries_ex.asp)

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}