JavaScript-CSS：無法讓導航菜單在滾動時從透明變為不透明

Question

好的，所以我在玩一些設計理念，似乎無法讓 JavaScript 做我想做的事。 我想要一個透明的 TopNav，當用戶滾動到 48px 或我認為 TopNav 背景變黑的任何地方時。 下面是我想要發生的粗略示例，但是當我滾動 TopNav 時，它只是保持透明。 我已經嘗試了從其他答案到復制/粘貼點的幾個解決方案，只需編輯元素名稱以匹配我的 html。 我只是不確定我做錯了什么：

CSS

body {
    font-family: Futura, Arial, Trebuchet MS, sans-serif;
}

header {
    margin: 0;
}
.stickyNav {
    position:fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 48px;
}
.topNav {
    max-width: 1366px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    background-color: black;
    color: #D4D4D4;
    height: 48px;
}
.scroll {
    background-color:#000000;
}
.navigationMenu{
    display: inline-flex;
    list-style: none;
}

JS

 var myNav = document.getElementById("TopNav"); window.onscroll = function() { "use strict"; if (document.body.scrollTop >= 1 || document.documentElement.scrollTop >= 1) { myNav.classList.add("scroll"); } else { myNav.classList.remove("scroll"); } };

HTML

 <header > <div class="stickyNav" > <nav class="topNav" id="TopNav"> <h3>LOGO HERE</h3> <ul class="navigationMenu"> <li class="navigationItem">Home</li> <li class="navigationItem">Services</li> <li class="navigationItem">About</li> <li class="navigationItem">Contact</li> </ul> </nav> </div> </header>

Answer 1

似乎無法讓 JavaScript 做我想做的事

這是 CSS 樣式的問題 - 而不是 Javascript。 這段代碼中的 Javascript 工作只是檢測滾動並添加或刪除類。

因此，如果您希望默認背景透明，請執行以下操作之一：

.topNav { background-color: transparent; } // transparent
.topNav { background-color: rgba(0,0,0,0); } // transparent

並在添加一個具有背景的類之后，執行以下操作：

.topNav.scroll { background-color: rgba(0,0,0,.5); }} // 50% black, "semi-transparent"