滚动到页面中其他 div 锚点时如何更改导航文本颜色

Question

好的，我一直在努力寻找答案并测试了几个小时，现在无济于事。我无法在这里或通过我自己的反复试验找到正确的答案，所以如果这是重复的，请原谅我。以下是我需要帮助的内容：当我滚动到页面中的另一部分时，我正在尝试更改导航文本颜色。因此，如果我在#firstpane id/div 上滚动，导航栏中的 'about' 文本将为黑色。当#secondpane id/div 在导航栏上滚动时，文本 'skills' 将为黑色。当滚动到#thirdpane id/div 时，导航栏中的文本 'contact' 将变为黑色。这类事情就是我要在这里完成的事情。

有谁知道如何使用纯粹的 css 或 javascript 来解决这个问题，不知道 jQuery？我知道如何在 jQuery 中做到这一点，只是不能在这种情况下使用它，所以请不要指导建议 jQuery。

谢谢。

body {
  background-image: url("images/someTree.jpg");
  background-size: cover;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}
header {
  width: 100%;
  height: 85px;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #96C339;
}
header h1#logo {
  display: inline-block;
  float: left;
  font-family: "Monsterrat", sans-serif;
  font-size: 40px;
  color: #FFF;
  font-weight: 400;
  margin-left: 35px;
}
header nav {
  display: inline-block;
  float: right;
}
header nav a {
  line-height: 100px;
  margin-left: 20px;
  margin-right: 20px;
  color: #FFF;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
}
header nav a:hover {
  color: #111;
}
@media all and (max-width: 600px) {
  header h1#logo {
    font-size: 30px;
    display: block;
    float: none;
    margin: 0 auto;
    height: 100px;
    line-height: 55px;
    text-align: center;
  }
  header nav {
    display: block;
    float: none;
    height: 50px;
    text-align: center;
    margin: 0 auto;
    margin-top: -65px;
  }
  header nav a {
    font-size: 15px;
    line-height: 50px;
    margin: 0 5px;
  }
}
#firstpane {
  background-color: #FFF;
  margin-left: 0;
  height: 100vh;
  margin: auto;
  opacity: 0.8;
}
#secondpane {
  background-color: #FFF;
  height: 100vh;
  margin: auto;
  margin-top: 6%;
  opacity: 0.8;
}
#thirdpane {
  background-color: #FFF;
  height: 100vh;
  margin: auto;
  margin-top: 6%;
  opacity: 0.8;
}
 ::selection {
  background: #000;
  /* WebKit/Blink Browsers */
}
 ::-moz-selection {
  background: #000;
  /* Gecko Browsers */
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1">
  <title>Portfolio Stuff</title>
  <link rel="stylesheet" type="text/css" href="portfolio.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div id="container">
    <header>
      <h1 id="logo">Some Name</h1>
      <nav>
        <a href="#firstpane" class="firstpanenav">About</a>
        <a href="#secondpane" class="secondpanenav">Skills</a>
        <a href="#thirdpane" class="thirdpanenav">Contact</a>
      </nav>
    </header>
    <!-- /header -->
    <div id="firstpane"></div>
    <div id="secondpane"></div>
    <div id="thirdpane"></div>
    <!-- end of container -->
  </div>
  <script type="text/javascript" src="portfolio.js"></script>
</body>

</html>

Answer 1

您可以尝试使用 JavaScript。为此，只需使用 window.onscroll（每次滚动时触发一个函数）。在该函数中，您必须检查标记的特定部分是否落后于 header。如果是这样，您只需在导航中添加一个 class。另一方面，如果你想要的元素回到了它的初始位置（或者至少不再在你的 header 后面）你可以简单地从你的导航中删除 class。

您的代码可能如下所示。当然你需要扩展它来处理你的第一个和第三个 nav/div。但至少我想这应该能帮助你实现你想要的。

// Get the necessary elements first
var skills = document.getElementsByClassName('secondpanenav')[0];
var second = document.getElementById('secondpane');

// Trigger event every time you scroll
window.onscroll = function() {
  // Get boundries of your div (top, bottom, left, right)
  var position = second.getBoundingClientRect();

  // Check your divs position and add/remove your desired class
  if (position.top < 85) {
    skills.classList.add('redColor');
  } else {
    skills.classList.remove('redColor');
  }
}

演示：https://jsfiddle.net/vw68eaqv/1/

滚动到页面中其他 div 锚点时如何更改导航文本颜色

How to change nav text color when scrolled over other div anchors in the page

html

css

pseudo-class