如何使導航欄在滾動時變為半透明？

Question

希望使我的導航欄在滾動頁面時變為半透明，要做到這一點，我知道我需要編輯ID標頭並將其轉換為rgba，但是，如何使它向下滾動頁面，我的標題變成半透明的？ 我假定使用某種JavaScript或jQuery，無論如何，這是我的代碼，有人可以指導我嗎？

        <header id="header">

        <div class="container">
            <div class="main">

                <div class="logo">
                    <a href="index.html"><div class="top-logo"></div></a>
                </div>
                <nav>
                    <ul>
                        <li><a href="index.html" class="active">Home<span class="border"></span></a></li>
                        <li><a href="my-portfolio.html">My Portfolio<span class="border"></span></a></li>
                        <li><a href="about-me.html">About & Contact<span class="border"></span></a></li>
                    </ul>
                </nav>

            </div>
        </div>

        </header>

---

 #header {
     position: fixed;
     display: block;
     width: 100%;
     top: 0;
     height: 77px;
     z-index: 9;
     min-width: 320px;
     background: #EFEFEF;
 }

Answer 1

試試這個腳本：

$( window ).scroll(function() {
$( "#header" ).css( "background-color", "rgba(55,55,55,0.4" );
});

Answer 2

Flopet17的答案也是我的第一次嘗試。

但是，當您停止滾動時，背景將保持半透明。 為此，您必須在滾動停止后“重置” css。 （或刪除其他類名。）有關此“ onscrollstop”功能，請查看： jQuery scroll（）檢測用戶何時停止滾動