如何用JS/jQuery动态计算fixed-top导航栏高度并设置body的padding-top？

这是个非常常见的 Bootstrap 开发痛点——fixed-top 导航栏的高度在响应式布局下会跟着屏幕尺寸变化，写死 padding-top 肯定适配不了所有场景。下面给你两种实用的实现方案，jQuery 和原生 JS 版本都有，你可以根据项目情况选：

jQuery 实现方案 #

首先咱们写一个核心函数，用来计算导航栏的实际高度，然后给 body 设置对应的 padding-top：

function setBodyPadding() {
  // 选中你的固定导航栏，这里假设类是 fixed-top
  const navHeight = $('.fixed-top').outerHeight();
  // 给 body 设置 padding-top，值等于导航栏的高度
  $('body').css('padding-top', navHeight + 'px');
}

接下来要让这个函数在页面加载完成和窗口尺寸变化时触发，而且为了避免 resize 事件频繁触发导致性能问题，咱们加个防抖函数：

// 防抖函数：延迟执行，避免频繁计算
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 页面加载完成后执行一次
$(document).ready(setBodyPadding);

// 窗口 resize 时，用防抖后的函数执行
$(window).on('resize', debounce(setBodyPadding));

原生 JavaScript 实现方案 #

如果你的项目没引入 jQuery，用原生 JS 也能搞定，逻辑是一样的：

function setBodyPadding() {
  const navElement = document.querySelector('.fixed-top');
  if (!navElement) return; // 防止导航栏不存在时报错
  const navHeight = navElement.offsetHeight;
  document.body.style.paddingTop = `${navHeight}px`;
}

// 防抖函数
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 页面加载完成（包括图片等资源）
window.addEventListener('load', setBodyPadding);
// 或者用 DOMContentLoaded，DOM 加载完就执行
document.addEventListener('DOMContentLoaded', setBodyPadding);

// 窗口 resize 触发防抖后的函数
window.addEventListener('resize', debounce(setBodyPadding));

额外注意事项 #

• 确保导航栏的选择器正确：如果你的导航栏用的是 Bootstrap 旧版的 navbar-fixed-top，记得把选择器改成对应的类。
• 如果导航栏有折叠菜单（比如移动端的汉堡菜单），展开/收起时高度会变，这时候还要监听折叠事件：

  // jQuery 版本监听折叠事件
  $('.navbar-collapse').on('show.bs.collapse hide.bs.collapse', setBodyPadding);
  
  // 原生 JS 版本监听折叠事件
  const collapseElement = document.querySelector('.navbar-collapse');
  collapseElement?.addEventListener('show.bs.collapse', setBodyPadding);
  collapseElement?.addEventListener('hide.bs.collapse', setBodyPadding);
  

• outerHeight()（jQuery）和 offsetHeight（原生）都会包含导航栏的内边距和边框，比用 height() 更准确，因为 Bootstrap 的导航栏默认有内边距。

内容的提问来源于stack exchange，提问作者kold-kreator