Javascript 如何修复引导导航栏在浏览器调整大小时的固定顶部填充

我有一个

.navbar.navbar inverse.navbar固定顶部

导航栏，它始终位于页面顶部。我给了

主体

一个70像素的填充，这个效果很好

问题是如果我调整浏览器的大小，导航栏就不再是固定高度的漂亮整洁了。取而代之的是，导航条的高度超过70像素，覆盖了页面的部分内容

为了解决这个问题，我尝试使用JQuery来检查导航条的高度，并给身体更多的填充，我将其放入

document.ready（）

---

但是，此解决方案不起作用，因为浏览器的大小缩小时不会重新加载，因此此检查不会动态进行。那么我该如何解决这个问题呢？

您可以在这里使用窗口调整大小事件侦听器。大概是这样的：

$( window ).resize(function() {
  if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
    $("html, body").css("padding-top", "150px");
  }
});

---

此外，根据屏幕分辨率，您还可以采用引导方式，将导航栏折叠并展开为一个按钮。上述方法略低于理想的IMO

您可以在此处使用窗口调整事件侦听器。大概是这样的：

$( window ).resize(function() {
  if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
    $("html, body").css("padding-top", "150px");
  }
});

---

此外，根据屏幕分辨率，您还可以采用引导方式，将导航栏折叠并展开为一个按钮。上述方法略低于理想的IMO

方法