在滚动时更改导航栏文本颜色

Question

我对一般编码很陌生，无法真正理解为什么这不起作用。 原来的颜色.nav__links和.logo是#fff所以我写了下面的代码：

$(document).ready(function(){
  
  $(window).scroll(function(){
    if ($(document).scrollTop() > 865 ) {
      $(".nav__links a").css("color", "#D76766");
    }
    else if ($(document).scrollTop() < 1629 ) {
      $(".nav__links a").css("color", "#fff");
    }
  });
  
  $(document).ready(function(){
    $(window).scroll(function() {
      if ($(document).scrollTop() > 865 ) {
        $(".logo").css("color", "#D76766");
      }
      else if ($(document).scrollTop() < 1629 ) {
        $(".logo").css("color", "#fff");
      }
    });
  });
});

和/或

window.onscroll = function() {myFunction()};
function myFunction() {
  if (window.scrollY >= 0 && window.scrollY  < 864) {
    document.getElementsByClassName("nav__links").css("color", "#fff");
    document.getElementsByClassName("logo").css("color", "#fff");
  } 
  else if (window.scrollY  > 865 && window.scrollY  < 1629) {
    document.getElementsByClassName("nav__links").css("color", "#D76766");
    document.getElementsByClassName("logo").css("color", "#D76766");
  } 
  else if (window.scrollY  > 1630 && window.scrollY  < 4000) {
    document.getElementsByClassName("nav__links").css("color", "#fff");
    document.getElementsByClassName("logo").css("color", "#fff"); 
  }
}

通过这个思考过程：

1. 如果原始颜色是白色，那么它将以白色开始，因此从 0 到 864 的颜色将是白色；
2. 从 865 到 1629 它更改为 #D76766
3. 从 1630 年到页面结束，它会变回白色。

在第一个代码中， nav从白色开始，更改为#D76766但不会变回白色。 至于第二个代码，它根本不起作用。 整个页面的导航栏都是白色的。

我将不胜感激任何帮助:)

Answer 1

我认为 if 序列中有错误，当你把这个

if ($(document).scrollTop() > 865 ) {
    $(".nav__links a").css("color", "#D76766");
} 
else if ($(document).scrollTop() < 1629 ) {
    $(".nav__links a").css("color", "#fff");
}

只有当 scrollTop() <= 865 时， nav_link 颜色才会变成白色，但在 >= 1630 时不会，因为 1630 总是高于 865 并且第一个条件为真。 正确的代码应该是

$(document).ready(function(){
  $(window).scroll(function() {
    let pos = $(document).scrollTop();
    if (pos >= 865 && pos <= 1629) {
      $(".nav__links a").css("color", "#D76766");
      $(".logo").css("color", "#D76766");
    } 
    else {
      $(".nav__links a").css("color", "#fff");
      $(".logo").css("color", "#fff");
    }
  });
});

只有当滚动条的位置在 865 和 1629 之间时，颜色才会变成#D76766，如果不是这样，颜色将返回白色