滾動時使用 Javascript 更改標題菜單

Question

當有人向下滾動時，我目前正在更改標題菜單。 我讓它工作了，但是現在當有人在頁面上的任何一點向上滾動時，標題會變回來。 我希望這只發生在距離頂部 855px 的地方。

為了澄清一點，有兩個標題“Header-row-a”和“Header-row-b”。 'A' 最初在加載頁面時顯示，當有人滾動超過 855px 時，它會更改為 'B'。 當某人超過 855px+ 並向上滾動時，它會變回“A”，我只希望當某人在 0px 和 855px 之間備份時發生這種情況。

為了給您更多說明，請自己查看該網站：www.healthcoachfx.com，您就會明白我的意思。

讓我知道你們中是否有人能破解這個！

提前謝謝了 ：）

我使用了這個 Javascript 和 CSS：

 var header_a = document.querySelector('#Header-row-a'); var header_b = document.querySelector('#Header-row-b'); var posY = 0; window.addEventListener('scroll', function(e){ if(this.pageYOffset > 855) { if(this.pageYOffset > posY) { header_a.style.transform = 'translateY(-81px)'; header_b.style.transform = 'translateY(-81px)'; } else { header_a.style.transform = 'translateY(0)'; header_b.style.transform = 'translateY(0)'; } posY = this.pageYOffset; } });

 @media screen and (min-width: 769px) { header.fl-builder-content{ position: fixed; top: 0; left: 0; width: 100%; height: 80px; overflow: hidden; z-index: 30000; } #header-row-a { display: flex; align-items: center; height: 80px; } .fl-row-content-wrap { width: 100%; } #header-row-a, #header-row-b { top: 0; left: 0; width: 100%; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; }

Answer 1

我會做一些像這樣簡單的事情：

window.addEventListener('scroll', function(e){
    if (this.pageYOffset > 855) {
        header_a.style.transform = 'translateY(-81px)';
        header_b.style.transform = 'translateY(-81px)';
    } else {
        header_a.style.transform = 'translateY(0)';
        header_b.style.transform = 'translateY(0)';
    }
});