固定定位头部下主内容margin-top动态适配及resize失效问题

开发站点时为头部元素设置position: fixed;实现滚动时头部固定的效果，但固定定位元素会脱离正常文档流，遮挡下方主内容，导致主内容初始区域不可见。
最初尝试给主内容设置固定像素值的margin-top，但窗口尺寸变化时头部高度会随之改变，固定margin值无法适配不同视口尺寸。因此编写JavaScript逻辑，尝试将主元素的margin-top动态设置为头部元素的实际高度，但实际运行时window.onresize事件未正常生效，主内容的margin-top属性仅在页面重新加载时更新，窗口大小调整时不会同步动态适配头部高度。

HTML结构 #

<div class="head" id="head">
</div>
<div class="item main" id="main">
</div>

JavaScript逻辑 #

function margintopchange() {
  var main = document.getElementById('main');
  var head = document.getElementById('head').getBoundingClientRect();
  newhead = head.height.toString();
  main.style.marginTop = newhead + "px";
  console.log(head.height);
  console.log(main.style.marginTop);
}

window.onresize = margintopchange();

样式代码 #

.head{
    position: fixed;
    width: 100%;
    border: solid #2196F3 5px;
}
.main {
    grid-area: "main";
    margin: 0px;
}

核心错误出在事件绑定行：window.onresize = margintopchange();

• 函数名后加括号代表立即执行该函数，这行代码实际是把margintopchange()的执行返回值（函数无return，返回undefined）绑定给了resize事件，而非把函数本身作为事件回调绑定。窗口尺寸变化时找不到对应的执行逻辑，自然不会更新margin值。
• 额外隐患：代码未在页面首次加载时执行适配逻辑，即使修复事件绑定，刚进入页面未触发resize时，主内容依然会被头部遮挡。
• 性能隐患：resize事件触发频率极高，直接绑定执行函数会在窗口拖拽过程中频繁触发DOM读写，容易造成页面卡顿。

• 第一步：修正事件绑定写法，去掉函数后的括号，将函数引用本身绑定给resize事件：

  // 修正后
  window.onresize = margintopchange;
  

• 第二步：添加页面首次加载的适配触发，保证初始进入页面时排版正常：

  // DOM加载完成后执行一次适配
  document.addEventListener('DOMContentLoaded', margintopchange);
  

• 可选优化：给resize回调加防抖，减少不必要的函数执行，避免卡顿：

  let resizeTimer = null;
  window.onresize = function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(margintopchange, 100);
  }
  

• 无JS替代方案：如果不想写JS做动态计算，可以直接将头部的定位方式改为position: sticky，sticky定位不会完全脱离文档流，天然不会遮挡下方正常流内容，不需要额外设置margin适配：

  .head{
      position: sticky;
      top: 0;
      width: 100%;
      border: solid #2196F3 5px;
  }
  

  改完后可以删除所有动态计算margin的JS代码，主内容不需要额外设置上边距。

内容的提问来源于stack exchange，提问作者Flyse