如何让固定的导航菜单滚动时透明？

Question

我一直在研究如何使导航栏透明，但我找不到我犯了哪些错误。目前菜单根本没有改变，任何人都可以给我一个我需要使用的代码示例，以便在我向下滚动时使其透明。

我正在尝试创建一个固定的导航菜单，当用户向下滚动页面时该菜单将变得透明。我使用了以下代码：

我预计当用户向下滚动时菜单会逐渐变得透明，但它仍然保持原始颜色。我还在不同的浏览器中测试了我的代码，以确保行为一致。 我尝试添加以下 CSS：

.menu {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(45deg, #f00,#00f);
    padding: 10px 0;
    margin-bottom: 40px;
}
.menu .transparent {
    background: linear-gradient(
        45deg,
        rgba(255,0,0,0.8),
        rgba(0,0,255,0.8)
    );
}

总而言之，这意味着以下样式仅在添加透明类后才应用于菜单中的元素

这是 JavaScript 上的： 在 JavaScript 中，我使用

document.querySelector

('.menu') 选择菜单并在滚动传递特定值时添加透明类。

document.addEventListener('DOMContentLoaded', function () {
    const menu = document.querySelector('.menu');

    function toggleMenuTransparency() {
        if (window.scrollY > 0) {
           menu.classList.add('tranparent')
        }
        else {
            menu.classList.remove('transparent');
        }
    }
    window.addEventListener('scroll', toggleMenuTransparency);
});

Answer 1

这只是一个拼写错误，请检查

menu.classList.add()

功能。另外，你的 css 选择器是错误的。使用

.menu.transparent

而不是

.menu .transparent

，选择器中的空格意味着您正在引用

.menu

的所有子级

.transparent

。

document.addEventListener('DOMContentLoaded', function() {
  const menu = document.querySelector('.menu');

  function toggleMenuTransparency() {

    if (window.scrollY > 0) {
      menu.classList.add('transparent')
    } else {
      menu.classList.remove('transparent');
    }
  }

  window.addEventListener('scroll', toggleMenuTransparency);
});

.menu {
  /* added some style to get the basic appearance---> */
  display: flex;
  align-items: center;
  //----------------------------------------
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(45deg, #f00, #00f);
  padding: 10px 0;
  margin-bottom: 40px;
}


/* added some style to get the basic appearance--> */

ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

main {
  height: 100vh;
}


/*------------------------------------ */

.menu.transparent {
  background: linear-gradient( 45deg, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.8));
}

<nav class="menu">
  <h2>MENU</h2>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Gallery</li>
  </ul>
</nav>
<main>
  smcklnadsnncldsa<br> mcklanskckl
  <br> ankjcnksank
  <br> nackjnksankc
  <br> smcklnadsnncldsa
  <br> mcklanskckl
  <br> ankjcnksank
  <br> nackjnksankc
  <br>smcklnadsnncldsa<br> mcklanskckl
  <br> ankjcnksank
  <br> nackjnksankc
  <br>smcklnadsnncldsa<br> mcklanskckl
  <br> ankjcnksank
  <br> nackjnksankc
  <br>smcklnadsnncldsa<br> mcklanskckl
  <br> ankjcnksank
  <br> nackjnksankc
  <br>smcklnadsnncldsa<br> mcklanskckl
  <br> ankjcnksank
  <br> nackjnksankc
  <br>
</main>