Question

我有一个标题。最初，其中的所有单词都是黑色的，但是在滚动时，颜色应该改变，我该怎么做？有没有现成的解决方案？模板中有这样的代码，但是由于它在引导程序上，因此显示效果很差。

    .header_area {
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 99;
      top: 0;
      padding: 0 4%;
    }

    .menu_area .navbar-brand {
      font-size: 72px;
      font-weight: 700;
      color: #fff;
      margin: 0;
      line-height: 1;
      padding: 0;
    }

    .menu_area .navbar-brand:hover,
    .menu_area .navbar-brand:focus {
      color: #fff;
    }

    .menu_area {
      position: relative;
      z-index: 2;
    }

    .menu_area #nav .nav-link {
      color: #fff;
      display: block;
      font-size: 16px;
      font-weight: 500;
      border-radius: 30px;
      -webkit-transition-duration: 500ms;
      -o-transition-duration: 500ms;
      transition-duration: 500ms;
      padding: 35px 15px;
    }

    .menu_area nav ul li>a:hover {
      color: #fb397d;
    }

    .header_area.sticky {
      background: rgb(0, 122, 223);
      background: -webkit-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      background: -o-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      background: -ms-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      background: linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      height: 70px;
      position: fixed;
      top: 0;
      z-index: 99;
    }

    .header_area.sticky .menu_area .navbar-brand {
      font-size: 50px;
    }

    .header_area.sticky .menu_area #nav .nav-link {
      padding: 23px 15px;
    }

    .header_area.sticky .navbar {
      padding: 0;
    }

<!-- language: lang-html -->

    <header class="header_area animated">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-12 col-lg-10">
            <div class="menu_area">
              <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                  <img src="img/image.png" style="margin-top: -15px;width: 48px; height: 38px;">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="ca-navbar">
                  <ul class="navbar-nav ml-auto" id="nav" style="margin-right: -220px;">
                    <li class="nav-item active"><a class="nav-link" href="#home" style="color: #000;">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about" style="color: #000;">About</a></li>
                    <li class="nav-item">
                      <a class="nav-link" href="#features" style="color: #000;"></a>Text</li>
                    <li class="nav-item"><a class="nav-link" href="#application" style="color: #000;">Application</a></li>
                    <li class="nav-item"><a class="nav-link" href="#support" style="color: #000;">Support</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact" style="color: #000;">Contact</a></li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </header>

因此，例如，您可以查看此网站colorlib.com/preview/#massive，其中标头中的文本为白色，但是当我滚动时，我需要查看其他图像和黑色文本。我怎样才能做到这一点？

在滚动过程中更改文本的颜色

0 个答案: