更改滚动标题背景的颜色

Posted 2023-05-07

【中文标题】更改滚动标题背景的颜色

【英文标题】：Changing colour of header background on scroll

【发布时间】：2021-04-15 17:33:59

【问题描述】：

我正在尝试在滚动时更改我的 WordPress 网站标题的背景颜色。我正在使用 scrollTop 函数来实现这一点，但无论出于何种原因，该值当前都作为函数返回。使用下面的代码将滚动位置记录到控制台我得到这个：

ƒ (e)return $(this,function(e,t,n)var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n,t,e,arguments.length)

jQuery(document).ready(function($) 
    $(window).scroll(function() 
        console.log($(window).scrollTop());
    );
);

由于滚动位置没有作为值返回，因此我无法使用它来编写标题的逻辑。从我所见，scrollTop 最初应该登录到控制台 0，然后随着窗口滚动而增加。我想知道是否有其他人遇到过同样的问题。

【问题讨论】：

它应该如何工作？您已经滚动并且标题颜色应该会改变，但是当您向上滚动时，标题颜色将是默认颜色。所以一定是这样的？

基本上是的。如果 scrollTop > 0 改变背景颜色，否则背景默认

【参考方案1】：

我给你做了一个在滚动时使用addClass() 方法设置标题颜色的例子。当滚动位置返回时，具有所需颜色的类被移除 - removeClass():

if ($(window).scrollTop() > 0) 
   $("p").addClass("color_scroll");
 else 
   $("p").removeClass("color_scroll");

$(document).ready(function() 
  $(window).scroll(function() 
    if ($(window).scrollTop() > 0) 
      $("p").addClass("color_scroll");
     else 
      $("p").removeClass("color_scroll");
    
  )
)

body 
  height: 5000px;


p 
  position: sticky;
  top: 0;


p.color_scroll 
  color: green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Title</p>