JS или JQuery DIV фиксированная высота меню для заполнения тела

Question

Я верю, что мои сомнения довольно просты, но я не достигаю нужного мне результата. Я использую BS4 для создания веб-сайта.

У меня есть навигационная панель с фиксированным верхом, использующая класс «fixed-top», но я не знаю ее фактическую высоту, и по мере продолжения отклика она меняется.

Я хочу вычислить высоту панели навигации с помощью JQuery или JS, а затем добавить ту же высоту, что и PADDING-TOP на теле, чтобы она всегда выровнялась правильно.

Это должно происходить при загрузке и изменении размера окна.

Как правильно это сделать?

Спасибо!

Answer 1

$(function(){
  $('body').css("padding-top", $(".fixed-top").height());
});

http://api.jquery.com/height/

Answer 2

$element.outerHeight() включает вертикальные отступы и границы в расчете высоты.

$element.height() - это необработанная высота элемента.

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

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