【JavaScript】ヘッダー position:fixed 要素が下に入り込んでしまう件

headerをfixedで固定すると、header以下の要素が下に入り込んでしまいます。
今回はスタイルシートにmargin-topをベタ書きするのではなく、JSで書いてみました。

const header = document.querySelector('header');
const headerHeight = header.offsetHeight;
const main = document.querySelector("main");
main.style.marginTop = `${headerHeight}px`;