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

【问题标题】：Different navbar text color for different sector of page页面不同扇区的不同导航栏文本颜色
【发布时间】：2018-01-26 16:28:30
【问题描述】：

现在我的导航栏文本在每一页上都是白色的。这个想法是使第二页和第四页上的导航栏文本以黑色显示。页面背景颜色不同。在我的情况下，页面只是 div 扇区，而不是单独的 html。我应该在 CSS 中添加什么来做到这一点？

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*/

<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>

【问题讨论】：

在 body 元素中使用不同的类名或 id 会有所帮助，然后基于这些类的导航栏颜色。否则你无法真正分辨出你在哪个页面上。
每个页面都有唯一的 html 文件吗？
@pavger，但我已经为每个页面设置了不同的 ID。（id="page1" 等）还是你的意思是别的？
@LeventeOtta 不，我没有。
这就是我的意思，只要类在 body 或 html 元素上。因此，如果您希望第 1 页有一个黑色导航栏，请在 css 中执行此操作：#page1 #nav { background-color: black; }

标签： html css

【解决方案1】：

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

【讨论】：

但现在我不使用任何 javascript 代码进行滚动。我还需要使用 javascript 吗？
我认为是的，因为对于check element is on screen，js 是最轻松的解决方案。我建议使用jQuery 和plugin。

【解决方案2】：

您可能不一定需要插件。这样的事情应该可以工作：

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');
  }
});

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*/

<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>

【讨论】：

我将您的特殊代码复制到我的 html 头部并用包围。我还在代码之前添加了一个指向 ajax 的链接，但它不起作用。也许我做错了什么。
html 元素在 JavaScript 之前加载，因此顶部未定义。您需要将 jQuery 代码放在 document.ready 函数中。把它放在 JavaScript 的第一行之前：$(document).ready(function () {，把它放在 JavaScript 的最后一行之后：});