javascript - 滚动时导航栏发生变化，无法使用库

Question

从透明滚动后，我试图让我的导航栏成为纯色。我看过示例，但它们使用的是我无法使用的 Bootstrap /库。我尝试过使用 JS，但无法进行任何更改。我的代码如下:

var myNav = document.getElementById('mynav');
window.onscroll = function() {

  if (document.body.scrollTop >= 200) {
    myNav.classList.add("nav-bar");
    myNav.classList.remove("navtransparent");
  } else {
    myNav.classList.add("navtransparent");
    myNav.classList.remove("nav-bar");
  }
};

.nav-bar {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #696969;
  background-color: #c0c0c0;
}

.navtransparent {
  background-color: transparent;
}

li.navlist {
  float: right;
}

li.navlist a {
  display: block;
  padding: 6px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: 14px 16px;
  text-decoration: none;
  color: #4d4d4d;
}

li.navlist:hover a {
  background-color: #d3d3d3;
}

<nav div='mynav'>
  <ul class="nav-bar">
    <li class="navlist"><a href="#four">E</a></li>
    <li class="navlist"><a href='#three'>D</a></li>
    <li class="navlist"><a href='#two'>C</a></li>
    <li class="navlist"><a href='#one'>B</a></li>
    <li class="navlist"><a href='#home'>A</a></li>
  </ul>
</nav>

Answer 1

主要问题(在修复 id 之后)是 .nav-bar 类已经在 ul 这使得它从一开始就被修复。

因此，将 ul 的样式和固定 #mynav 的样式拆分为不同的规则。

您还需要同时检查 document.body.scrollTop 和 document.documentElement.scrollTop，因为某些浏览器会滚动 html 和其他的 body。

var myNav = document.getElementById('mynav');
window.onscroll = function() {
  var scroll = document.body.scrollTop || document.documentElement.scrollTop;
  
  if (scroll >= 50) {
    myNav.classList.add("navfixed");
    myNav.classList.remove("navtransparent");
  } else {
    myNav.classList.add("navtransparent");
    myNav.classList.remove("navfixed");
  }
};

.nav-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.navfixed{
  position:fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  left:0;
  background-color: #c0c0c0;
  border: 1px solid #696969;
}
.navtransparent {
  background-color: transparent;
}

li.navlist {
  float: right;
}

li.navlist a {
  display: block;
  padding: 6px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: 14px 16px;
  text-decoration: none;
  color: #4d4d4d;
}

li.navlist:hover a {
  background-color: #d3d3d3;
}

<nav id='mynav'>
  <ul class="nav-bar">
    <li class="navlist"><a href="#four">E</a></li>
    <li class="navlist"><a href='#three'>D</a></li>
    <li class="navlist"><a href='#two'>C</a></li>
    <li class="navlist"><a href='#one'>B</a></li>
    <li class="navlist"><a href='#home'>A</a></li>
  </ul>
</nav>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae fringilla sapien. In nec dui erat. Pellentesque a arcu sit amet est lacinia aliquam sed nec orci. Aliquam vitae euismod eros. Proin varius quam nec eros eleifend placerat. Morbi sed maximus purus. Pellentesque odio enim, varius a viverra a, finibus id dolor. Curabitur pulvinar pellentesque leo, consequat porttitor dui laoreet at. Maecenas accumsan libero nec mi sollicitudin, sed porttitor sem tristique. Maecenas viverra faucibus urna et suscipit. Cras vulputate odio at mi egestas ornare ut sit amet ligula.

Nulla imperdiet nisi id purus dapibus, at sodales lectus ornare. Praesent vehicula diam non lorem porta iaculis eget id ante. Phasellus ullamcorper purus sit amet vestibulum fringilla. Donec auctor dignissim dolor ut consectetur. Nulla vitae nulla lectus. Etiam pretium blandit libero, vehicula varius quam pulvinar id. Etiam quis orci pellentesque, volutpat massa a, suscipit lorem.

Suspendisse posuere diam quis ex aliquam sodales. Ut vel erat in nibh aliquet iaculis. Fusce at aliquam nulla, eget tristique tortor. Donec lobortis, arcu sit amet scelerisque ullamcorper, metus augue sollicitudin velit, a placerat leo turpis eu lectus. Phasellus cursus dictum dui et venenatis. Donec non tempor odio. Aenean at ipsum sed sapien volutpat laoreet. Donec in lorem est. Fusce tortor diam, faucibus eget lectus quis, elementum tempus ex.

Vestibulum in luctus eros, vel rutrum augue. Ut ultricies velit sit amet diam convallis aliquam. Curabitur vel ipsum nisl. Proin dapibus tortor eget tortor congue faucibus. Duis sit amet purus et ipsum consectetur vulputate non at arcu. Curabitur consectetur et ipsum id aliquam. Sed auctor massa at vestibulum vehicula. In consequat scelerisque ornare. Vestibulum pharetra nisi eget congue ultrices. Nullam quis elementum libero. Proin quis nisi ut tellus ultricies pharetra. Curabitur dignissim neque id nulla dictum fringilla. Vivamus tempus elit ipsum, finibus mattis tortor consectetur vitae.