Javascript 如何使固定标题更改滚动条上的颜色

当我说header时，我指的是一个

。但我在页面的左侧有一个固定的标题，我使用视差，这样当我向下滚动时，背景div会发生变化

我希望h1的颜色在我向下滚动时发生变化，就像这样。（检查左上角的夜班收割台！）

我已经尝试过像这样使用Jquery：

if($(window).scrollTop() > 2600) {
    $(".leftHeaders a").css("color", "black");

$(window).on("scroll", function() {
  if($(window).scrollTop() > 2600) {
    //add black background
    $(".leftHeaders a").css("color", "black");
  } 
  else {
    //remove background
  }
});

---

但是当你向下滚动时，你并没有看到很酷的颜色转换。

你忘记了使用事件侦听器，并且只尝试了一次更改颜色

您可以尝试以下方法：

if($(window).scrollTop() > 2600) {
    $(".leftHeaders a").css("color", "black");

$(window).on("scroll", function() {
  if($(window).scrollTop() > 2600) {
    //add black background
    $(".leftHeaders a").css("color", "black");
  } 
  else {
    //remove background
  }
});

$（文档）.on（'scroll'，函数（）{
log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）>2600）{
$（“.leftHeaders a”）.css（“颜色”、“黑色”）；
}
})

尝试以下方法：

if($(window).scrollTop() > 2600) {
    $(".leftHeaders a").css("color", "black");

$(window).on("scroll", function() {
  if($(window).scrollTop() > 2600) {
    //add black background
    $(".leftHeaders a").css("color", "black");
  } 
  else {
    //remove background
  }
});

您可以参考我很久以前发布的这个老问题：

---

：）

您应该将代码放在$（窗口）中

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>2600）{
$（“.leftHeaders a”）.css（“颜色”、“黑色”）；
}
});我想你想要这样的东西-

$(window).scroll(function() {
                var top = $(this).scrollTop();
                if (top > 2600) {
                   $(".leftHeaders a").css("color", "black");

                } 
               else {
                   $(".leftHeaders a").css("color", "red");

                }

 })

如果你检查你链接到的页面，你可以看到它是如何完成的；“夜班”的措辞是两个独立的SVG——一个黑色，一个白色。然后根据幻灯片之间的边界对其进行剪裁，以产生过渡效果。这比仅仅更改元素的CSS属性要复杂得多。您可以看到之前已经提出的问题：[