时间戳

首页 > 解决方案 > 如何使用 JQuery 根据屏幕大小实时更新 CSS？

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

问题描述

我从响应中提取了一段 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/

标签： javascriptjqueryhtmlcssresponsive

解决方案

除了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);
}

推荐阅读