在沒有指定 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>