Question

我正在创建一个导航栏，所以当我滚动它时，其颜色背景颜色会发生变化，但是可以正常工作，但是当我滚动顶部导航栏颜色时，它会变成白色，但字体颜色保持白色。

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 630 || document.documentElement.scrollTop > 630) {

        document.getElementById("header").style.background = "#1c1a33";
        document.getElementById("header").style.transition = "500ms all";
    } 
    else{
        document.getElementById("header").style.background = "#fff";
        document.getElementById("header").style.color = "#333";
        document.getElementById("header").style.transition = "500ms all";
    }

}

可以看出，当导航栏顶部滚动时我也定义了颜色，但是背景变为白色字体仍与白色相同，因此如何更改字体颜色？

document.getElementById("header").style.color = "#333";

Answer 1

如果scrollTop > 630这样，您就没有设置字体颜色

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 630 || document.documentElement.scrollTop > 630) {

    document.getElementById("header").style.background = "#1c1a33";
    document.getElementById("header").style.color = "#fff";
    document.getElementById("header").style.transition = "500ms all";
  } else {
    document.getElementById("header").style.background = "#fff";
    document.getElementById("header").style.color = "#333";
    document.getElementById("header").style.transition = "500ms all";
  }

}

body {height: 2000px;display: block}
#header {position: fixed; top: 0}

<div id="header">
  header
</div>

使用jQuery更改导航栏上滚动的字体颜色

1 个答案: