向下滾動時如何更改菜單的背景顏色？

Question

我是一個純學生的初學者，現在我正在嘗試為我的項目創建一個自適應菜單，但我需要更改背景顏色，因為白底白字有點問題。

我嘗試創建一個腳本，以便在我向下滾動時將 class '滾動'添加到我的'導航'，並在我返回頂部時將其刪除。

但正如我所說，我是一個初學者，似乎我的腳本或 CSS 有問題。

你能幫我理解我在哪里做錯了嗎？

謝謝您的幫助 ！

PS：對不起我的英語我盡力了。

`https://codepen.io/Raz7/pen/zYKoJzY`

它完全搞砸了，可能是由於我輸入的所有圖像。

Answer 1

在您的腳本標簽中，您使用的是 JQuery 選擇器“$”，但您沒有添加 JQuery 庫。

為了簡單起見，我將使用文檔 object 和 Vanilla Javascript 中的內置 querySelector。

以下代碼將執行您想要的操作：

let timeout;

window.addEventListener('scroll', function (e) {

    // If there's a timer, cancel it
    if (timeout) {
        window.cancelAnimationFrame(timeout);
    }

    // Setup the new requestAnimationFrame()
    timeout = window.requestAnimationFrame(function () {

        // Run our scroll functions
        let nav = document.querySelector('nav');

        if (document.querySelector('header').getBoundingClientRect().top !== 0) {
            nav.classList.add('scroll');
        } else {
            nav.classList.remove('scroll');
        }      
    });
}, false);
 

要真正知道到頂部的距離是多少，您需要一個參考點，在此腳本中，我使用 header 元素作為參考點，因為 header 是相對於主體標簽的。 如果 header 到頂部的距離不為 0，則將滾動 class 添加到導航元素，否則將其刪除。 您還可以看到超時和 requestAnimationFrame，這有助於消除滾動事件的反彈。

不要使用 JQuery 庫，如果您是初學者，我建議您了解 Vanilla Javascript 和 DOM。

https://www.w3schools.com/js/js_htmldom.asp