Question

滚动时更改导航栏内容颜色

2021-02-02

2200

javascript html css

我想在滚动时更改链接的颜色。我已经有使导航栏变粘并添加背景颜色的代码，但我还需要在滚动时更改链接的颜色。我查看了其他一些主题，但找不到解决方案。

这是代码：

const navbar = document.querySelector(".navbar");

window.onscroll = ()=> {
  this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}

.navbarcontent {
  max-width: 1250;
  height: 70px;
  margin: auto;
  padding: 0px 30px;
}

.navbar {
  position: fixed;
  z-index: 5;
  width: 100%;
  padding: 25px 0;
  transition: all 0.3s ease;
  /* background: #1b1b1b; */
}

.navbar.sticky {
  padding: 10px 0;
  background: black;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
  content: "";
  /* background-color: rgba(10, 10, 10, 0.9); */
}

.navbar.sticky::after {
  content: "";
  opacity: 0.5;
}

.navbar .navbarcontent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .menu-list {
  display: inline-flex;
}

.navbar .logo a {
  color: #fff;
}

.menu-list li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
  transform: all 0.3s ease;
}

.menu-list li a {
  color: black;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
}

<nav class="navbar">
        <div class="navbarcontent">
            <div class="logo"><a href="#">Logo</a></div>
            <!-- <div class="icon cancel-btn">
                <img src="/img/times-solid.svg" alt="">
            </div> -->
            <ul class="menu-list">
                <li><a href="#hero">Home</a></li>
                <li><a href="#text-slider">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contactform">Contact</a></li>
                <li><a href="#">Deutsch</a></li>
            </ul>
            <!-- <div class="icon menu-btn">
                <img src="/img/bars-solid.svg" alt="">
            </div> -->
        </div>
    </nav>

我尝试创建一个新的 const 作为 navbar2 ，并继续使用原始 navbar const 中使用的相同逻辑，我在 css 中创建了一个名为 .menu-list.navColor li a 的类，并将黑色改为白色，但没有成功。感谢您的时间！

Answer 1

您有一个更具体的 CSS 选择器 .menu-list li a 来设置颜色。要覆盖此选择器，您需要一个同样具体且位于文档后面的选择器，或者更具体的选择器。

由于您要添加 sticky 类，因此您可以使用： .sticky .menu-list li a

const navbar = document.querySelector(".navbar");

window.onscroll = ()=> {
  this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}

.navbarcontent {
  max-width: 1250;
  height: 70px;
  margin: auto;
  padding: 0px 30px;
}

.navbar {
  position: fixed;
  z-index: 5;
  width: 100%;
  padding: 25px 0;
  transition: all 0.3s ease;
  /* background: #1b1b1b; */
}

.navbar.sticky {
  padding: 10px 0;
  background: black;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
  content: "";
  /* background-color: rgba(10, 10, 10, 0.9); */
  color: #fff;
}

.navbar.sticky::after {
  content: "";
  opacity: 0.5;
}

.navbar .navbarcontent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .menu-list {
  display: inline-flex;
}

.navbar .logo a {
  color: #fff;
}

.menu-list li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
  transform: all 0.3s ease;
}

.menu-list li a {
  color: black;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
}

.sticky .menu-list li a {
  color: #FFF;
}

<nav class="navbar">
        <div class="navbarcontent">
            <div class="logo"><a href="#">Logo</a></div>
            <!-- <div class="icon cancel-btn">
                <img src="/img/times-solid.svg" alt="">
            </div> -->
            <ul class="menu-list">
                <li><a href="#hero">Home</a></li>
                <li><a href="#text-slider">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contactform">Contact</a></li>
                <li><a href="#">Deutsch</a></li>
            </ul>
            <!-- <div class="icon menu-btn">
                <img src="/img/bars-solid.svg" alt="">
            </div> -->
        </div>
    </nav>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Answer 2

祝你好运。

window.onscroll = function() {
    // console.log('scrolling');
var navbar2 = document.getElementById("nav1");
navbar1 = document.querySelector(".navbar");
if (this.scrollY > 20)
{
navbar2.classList.add("sticky");
}
else
{
navbar2.classList.remove("sticky");
}
};

.navbarcontent {
  max-width: 1250;
  height: 70px;
  margin: auto;
  padding: 0px 30px;
}

.navbar {
  position: fixed;
  z-index: 5;
  width: 100%;
  padding: 25px 0;
  transition: all 0.3s ease;
  /* background: #1b1b1b; */
}

.navbar.sticky {
  padding: 10px 0;
  background: black;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
  content: "";
  /* background-color: rgba(10, 10, 10, 0.9); */
}

.navbar.sticky::after {
  content: "";
  opacity: 0.5;
}

.navbar .navbarcontent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .menu-list {
  display: inline-flex;
}

.navbar .logo a {
  color: #fff;
}

.menu-list li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
  transform: all 0.3s ease;
}

.menu-list li a {
  color: black;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
}

.navbar.sticky li a {
  color: white;
}

<nav id="nav1" class="navbar ">
        <div class="navbarcontent">
            <div class="logo"><a href="#">Logo</a></div>
            <!-- <div class="icon cancel-btn">
                <img src="/img/times-solid.svg" alt="">
            </div> -->
            <ul class="menu-list">
                <li><a href="#hero">Home</a></li>
                <li><a href="#text-slider">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contactform">Contact</a></li>
                <li><a href="#">Deutsch</a></li>
            </ul>
            <!-- <div class="icon menu-btn">
                <img src="/img/bars-solid.svg" alt="">
            </div> -->
        </div>
    </nav>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />