javascript - 如何使用 JQuery 根据屏幕尺寸实时更新 CSS？

Question

我从对以下内容的回复中提取了一段 JS: How can I make content appear beneath a fixed DIV element?

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 .您只需在调整大小回调上执行相同的代码。每次窗口大小更改时都会调用 Resize。

为了减少代码冗余，我引入了一个新方法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);
}