Question

我试图让我的导航栏从透明滚动后变成纯色。我看了一些例子，但是他们正在使用我无法使用的bootstrap / libraries。我尝试过使用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.

滚动时导航栏更改，无法使用库

1 个答案: