Question

好的，一直试图找到一个答案并对其进行测试几个小时现在无济于事。我无法在这里或通过我自己的试验和错误找到正确的答案，如果这是重复，请原谅我。这是我需要帮助的：当我滚动到页面中的另一个部分时，我正在尝试更改导航文本颜色。所以，如果我滚动#firstpane id / div，我的导航栏中的'about'文本将为黑色。当#secondpane id / div在导航栏上滚动时，“技能”将为黑色。当滚动#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（每次滚动时触发一个函数）。在该功能中，您必须检查标记的特定部分是否落在标题后面。如果是这样，您只需在导航中添加一个类。另一方面，如果你想要的元素重新回到它的初始位置（或者至少不在你的标题之后），你可以简单地从导航中删除该类。

您的代码可能如下所示。当然你需要扩展它来处理你的第1和第3个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锚点时如何更改导航文本颜色

1 个答案: