不同扇区页面的不同导航栏文本颜色

Question

现在我的导航栏文字在每个页面都是白色的。我们的想法是将第二页和第四页上的导航栏文本设置为黑色以便查看它。页面背景颜色不同。在我的例子中，页面只是div扇区，而不是单独的htmls。我应该在CSS中做什么呢？

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}


/*NAVBAR START*/

#nav li {
  display: inline;
  color: white;
}

#nav {
  list-style: none;
  position: fixed;
  right: 0px;
}

li a {
  display: inline;
  color: white;
}


/*NAVBAR END*/

.center {
  font-size: 50px;
  padding: 130px 0 0 0;
}

#page1,
#page3 {
  background-color: black;
  height: 800px;
}

#page2,
#page4 {
  background-color: white;
  height: 800px;
}

#font-page1 {
  color: white;
}

#font-page2 {
  color: black;
}

@media(max-width: 768px) {
  /*NAVBAR START*/
  #nav li {
    font-size: 15px;
    display: block;
    color: white;
  }
  /*NAVBAR END*/

＆＃13;

<ul id="nav">
  <li><a href="#page1">PAGE1</a></li>
  <li><a href="#page2">PAGE2</a></li>
  <li><a href="#page3">PAGE3</a></li>
  <li><a href="#page4">PAGE4</a></li>
</ul>

<div id="page1">
  <div class="center">
    <p id="font-page1">Morbi.</p>
  </div>
</div>
<div id="page2">
  <div class="center">
    <p id="font-page2">Morbi molest.</p>
  </div>
</div>

<div id="page3">
  <div class="center">
    <p id="font-page1">Morbi</p>
  </div>
</div>

<div id="page4">
  <div class="center">
    <p id="font-page2">Morbi molest.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在我的导航栏文字在每个页面都是白色的。我们的想法是将第二页和第四页上的导航栏文本设置为黑色以便查看它。页面背景颜色不同。在我的例子中，页面只是div扇区，而不是单独的htmls。我应该在CSS中做什么呢？

Answer 1

没有办法，因为css无法处理滚动。你应该使用javascript。

Answer 2

您可能不一定需要插件。这样的事情应该有效：

＆＃13;

＆＃13;

var top1 = $('#page1').offset().top;
var top2 = $('#page2').offset().top;
var top3 = $('#page3').offset().top;
var top4 = $('#page4').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#nav a').css('color', '#fff');
  } else if (scrollPos >= top2 && scrollPos < top3) {
    $('#nav a').css('color', '#000');
  } else if (scrollPos >= top3 && scrollPos < top4) {
    $('#nav a').css('color', '#fff');
  } else if (scrollPos >= top4) {
    $('#nav a').css('color', '#000');
  }
});

＆＃13;

body {
  margin: 0;
  padding: 0;
}


/*NAVBAR START*/

#nav li {
  display: inline;
  color: white;
}

#nav {
  list-style: none;
  position: fixed;
  right: 0px;
}

li a {
  display: inline;
  color: white;
}


/*NAVBAR END*/

.center {
  font-size: 50px;
  padding: 130px 0 0 0;
}

#page1,
#page3 {
  background-color: black;
  height: 800px;
}

#page2,
#page4 {
  background-color: white;
  height: 800px;
}

#font-page1 {
  color: white;
}

#font-page2 {
  color: black;
}

@media(max-width: 768px) {
  /*NAVBAR START*/
  #nav li {
    font-size: 15px;
    display: block;
    color: white;
  }
}


/*NAVBAR END*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li><a href="#page1">PAGE1</a></li>
  <li><a href="#page2">PAGE2</a></li>
  <li><a href="#page3">PAGE3</a></li>
  <li><a href="#page4">PAGE4</a></li>
</ul>

<div id="page1">
  <div class="center">
    <p id="font-page1">Morbi.</p>
  </div>
</div>
<div id="page2">
  <div class="center">
    <p id="font-page2">Morbi molest.</p>
  </div>
</div>

<div id="page3">
  <div class="center">
    <p id="font-page1">Morbi</p>
  </div>
</div>

<div id="page4">
  <div class="center">
    <p id="font-page2">Morbi molest.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;