在没有指定 class 时获取 div 的高度

Question

构建，我在我的 javascript（纯 JavaScript）中遇到了一个问题。 我有一个固定的导航栏，当用户向下滚动时会缩小。 我不使用粘性元素，因为它们在某些计算机上会遇到困难。 当用户向下滚动时，此 class 将添加到导航栏。

.sticky {
    position: fixed;
    padding: 10px 5% 10px 5%;
    background-image: linear-gradient(rgb(0, 0, 0),rgb(0, 0, 0));
}

因为这个导航栏从来都不是相对的，所以我在正文中第二个元素的顶部添加了一个边距。 像这样：

var mainNav = document.querySelector(".header-nav");
var tmp = document.getElementsByTagName('HEADER')[0];

tmp.nextElementSibling.style.marginTop = mainNav.offsetHeight + "px";

window.addEventListener("resize", function(event) {
    tmp.nextElementSibling.style.marginTop = mainNav.offsetHeight + "px";
})

我遇到的问题涉及我使用的调整大小 function 因为 header 需要根据浏览器大小改变高度。 现在，如果我在页面顶部调整页面大小，当 header 未缩小（例如 150 像素）时，一切正常。 但是，如果我在导航栏较小时滚动到页面中间，比如 70 像素高，那么当我向上滚动时，第二个元素的 marginTop 只有 70 像素，而当导航栏再次增长时我需要它是 150 像素. 希望这能说明我的问题。 我想知道是否有办法让 mainNav.offsetHeight 像 mainNav(without.sticky class).offsetHeight 这样的值

Answer 1

从问题：

我想知道是否有办法让mainNav.offsetHeight像mainNav(without.sticky class).offsetHeight这样的值

问题是如何确定 header 的默认（no.sticky）和.sticky 高度。

这是一个技巧：

A. 克隆 header 并使克隆不可见，

B.在真正的header之后添加克隆的header，

C。 确定克隆的 header 的默认高度和.sticky高度，

D. 从 DOM 中删除克隆的 header，

E. 返回默认和.sticky偏移高度。

 function getHeaderHeights() { const hdr = document.querySelector('.header-nav'); const hdrClone = hdr.cloneNode(true); hdrClone.style.opacity = 0; hdr.insertAdjacentElement('afterend', hdrClone); const defaultHeight = hdrClone.offsetHeight; hdrClone.classList.add('sticky'); const stickyHeight = hdrClone.offsetHeight; hdrClone.remove(); return { defaultHeight, stickyHeight }; } const { defaultHeight, stickyHeight } = getHeaderHeights(); console.log(`Header ht: ${defaultHeight}, stickyHt: ${stickyHeight}`);

 .header-nav { background-color: #a0a0a0; padding: 40px 5%; color: white; width: 100%; }.sticky { position: fixed; padding: 10px 5% 10px 5%; background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)); }

 <header class="header-nav"> This is a sample header.<br> It has two lines of text. </header>