javascript - JS 或 JQuery DIV 固定菜单高度用于正文填充

Question

我相信我的怀疑很简单，但我没有达到我需要的结果。我正在使用 BS4 来建立一个网站。

我有一个固定顶部导航栏，使用“固定顶部”类，但我不知道它的实际高度，并且随着响应的进行，它会发生变化。

我想通过 JQuery 或 JS 计算导航栏的高度，然后在 body 上添加与 PADDING-TOP 相同的高度，因此它将始终正确对齐。

它必须在窗口加载和调整大小时发生。

这样做的正确方法是什么？

谢谢！

标签： javascriptjqueryhtmltwitter-bootstrap

Answer 1

$element.outerHeight()在高度计算中包括垂直填充和边框。

$element.height()是元素的原始高度。

$(window).on("load resize", function (event) {
    var $navbar = $(".my-navbar");
    var $body = $("body");

    $body.css("padding-top", $navbar.outerHeight());
});