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

Question

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

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

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

在这个 fiddle 中工作正常，但在实际浏览器中运行时却不行。

下面是有问题的函数。

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/

预期结果:

• 无论视口(viewport)宽度、页面加载次数或使用的浏览器如何，我都希望白色 div 在标题下方显示 8 像素。

实际结果:

• Chrome:大约 70% 的时间页面正确加载。有时会出现 在页面上太高有时太低。

• Firefox:与 Chrome 相同，只是不太一致，因为它仅在大约 10% 的时间内正确加载。

Answer 1

通过将 load 事件添加到 window 对象，确保在页面上加载所有元素后调用该函数，如下所示:

window.addEventListener("load", bodyMarginTop);