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

Question

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

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

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

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

正确的方法是什么？

谢谢!

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());
});