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

有了这个思考过程：

如果原始颜色是白色，那么它将以白色开始，因此从 0 到 864 的颜色将是白色；
从 865 到 1629，它更改为 #D76766
从 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，如果不是这样，颜色会变回白色

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

1 个答案: