如何使固定标题在滚动时更改颜色[重复]答案

【问题标题】：How to make a fixed header change colour on scroll [duplicate]如何使固定标题在滚动时更改颜色[重复]
【发布时间】：2017-04-09 18:36:32
【问题描述】：

当我说标题时，我的意思是 <h1>。但是我的页面左侧有一个固定的标题，并且我使用了视差，这样当我向下滚动时，背景 div 会发生变化。

我希望在向下滚动时改变 h1 的颜色，就像 this website 所做的那样。（检查左上角的夜班标题！）。

我尝试过这样使用 Jquery：

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

但是当你向下滚动时，你没有得到很酷的颜色过渡。

【问题讨论】：

如果您检查链接到的页面，您可以看到它是如何完成的； “夜班”的措辞是两个独立的 SVG - 一黑一白。然后将它们与幻灯片之间的边界对齐以提供过渡效果。这远比仅仅更改元素的 CSS 属性要复杂
您可以看到之前已经提出的问题：[stackoverflow.com/questions/21757193/…

标签： javascript jquery html css

【解决方案1】：

您应该像这样将代码放入 $(window).scroll() 中

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

【讨论】：

【解决方案2】：

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

你可以试试这样的：

$(document).on('scroll', function () {
    
    console.log($(window).scrollTop());
  
    if ($(window).scrollTop() > 2600) {
      $(".leftHeaders a").css("color", "black");
    }
      
})

【讨论】：

【解决方案3】：

试试这样的：

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

您可以参考我之前发布的这个老问题： wrap code in a function. noob here :)

【讨论】：

【解决方案4】：

我想你想要这样的东西-

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

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

                }

 })

【讨论】：