javascript - 我设置边距的功能无法始终如一地工作

Question

我试图在我的标题下设置一个 div，它的位置为“固定”。我正在使用一个函数来查找标题的“clientHeight”，添加几个像素并将“marginTop”设置为 div。每隔几次我加载页面或重新加载页面，图像并不总是在所需的位置. 我对使用 js 制作响应式网站比较陌生。几个月前才开始编码。

我尝试将 div ("#page") 设置为绝对并使用 "top" 样式属性。那真的没用。我也尝试过使用 relative ，但这与我最初的尝试大致相同。

此外，我只在 Chrome 和 Firefox（最新版本）中对此进行了测试。

在这个小提琴中工作正常，但当我在实际浏览器中运行它时却不行。

以下是有问题的功能。

function bodyMarginTop () {
    const header = document.querySelector("header");
    const page = document.getElementById("page");

    page.style.marginTop = (header.clientHeight + 8) + "px";
}

https://jsfiddle.net/Cpt_Crooked/yf8xj3s0/2/

预期结果：

• 无论视口宽度、页面加载次数或正在使用哪个浏览器，我都希望白色 div 出现在标题下方 8 像素处。

实际结果：

• Chrome：页面加载正确率大约为 70%。有时它在页面上显得太高有时太低。

• Firefox：与 Chrome 相同，只是一致性较差，因为它只有大约 10% 的时间正确加载。

标签： javascriptcss

Answer 1

在元素上运行 JS 之前加载 DOM。

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    bodyMarginTop();
  }
}