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

【问题标题】：How to change nav text color when scrolled over other div anchors in the page滚动到页面中的其他 div 锚点时如何更改导航文本颜色
【发布时间】：2016-10-03 20:43:11
【问题描述】：

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

有人知道如何使用纯 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>

【问题讨论】：

标签： html css pseudo-class

【解决方案1】：

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

您的代码可能如下所示。当然，您需要扩展它以处理您的第一个和第三个导航/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/

【讨论】：

恶心！我将不得不对其进行一些修改，但我只是想要一个大致的想法。这正是我需要的开始。一个问题，因为函数会一遍又一遍地触发，这会妨碍性能吗？我即将实现一个原生平滑滚动和可能的视差，这就是我将为 u/i 做的其余繁重工作。只是不希望最终产品出现任何问题。非常感谢@Aer0，不胜感激。
很抱歉，我真的不知道这会对性能产生多大影响。但据我所知，这是其他图书馆也使用的一般行为。因此，即使它在每个卷轴上都开火，我认为这不会导致糟糕的表现。正如我已经说过的，我对这些信息不是 100% 确定的。至少你可以简单地尝试。 :)