更改滚动标题的背景颜色

Posted 2023-05-08

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

【英文标题】：Change background color of header on scroll

【发布时间】：2021-02-24 20:21:15

【问题描述】：

我想在标题滚动时更改标题的背景颜色（从透明变为黑色）。我该怎么做？

我使用 CMS 来创建标题。那是我目前的代码：

<script>
  jQuery(function($) 
    $(window).scroll(function() 
      if ($(document).scrollTop() > 50) 
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
        $('#my-site-logo').addClass('reduce-logo');
       else 
        $('#section-padding').removeClass('reduce-section-padding');
        $('#section-padding').addClass('slow-transition');
        $('#row-width').removeClass('increase-row-width');
        $('#row-width').addClass('slow-transition');
        $('#my-site-logo').removeClass('reduce-logo');
        $('#my-site-logo').addClass('slow-transition');
      
    );
  );
</script>

<style>
  .reduce-section-padding 
    transition: all 0.9s ease-out 0s;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  
  
  .reduce-logo 
    transition: all 0.9s ease-out 0s;
    transform: scale(0.8) !important;
    /* Standard syntax */
    /*content: url(/wp-content/uploads/2020/05/favicon.png) !important;*/
  
  
  .increase-row-width 
    transition: all 0.9s ease-out 0s;
    width: 70% !important;
  
  
  .slow-transition 
    transition: all 0.9s ease-out 0s;
  
  
  #main-content 
    margin-top: 5vw;
  
</style>

【问题讨论】：

你能添加你的html和css并创建一个sn-p吗？

这是网站，这里可以看到标题carpacomunication.it

【参考方案1】：

您可以像这样使用纯 javascript： （JSFiddle：https://jsfiddle.net/omartheman949/5jLngzkh/12/） 将以下script 标记及其内容放在现有的script 标记下（或将以下script 标记的内容放在现有的script 标记内）：

<script>
  var prevScrollpos = window.pageYOffset;
  window.onscroll = function() 
    var currentScrollPos = window.pageYOffset;
    if (window.pageYOffset === 0) 
      document.getElementById("header").style.backgroundColor = "transparent";
      document.getElementById("header").style.color = "black";
     else 
      document.getElementById("header").style.backgroundColor = "black";
      document.getElementById("header").style.color = "white";
    
    prevScrollpos = currentScrollPos;
  
</script>

【讨论】：

感谢您的重播，但我不知道我必须在哪里插入此代码。冷你又帮我了？ :D

嘿@Billy，我相信您可以将此代码插入<script></script> 标记内，我会想到页面上的任何位置。与上面的 jQuery 代码相同。我在我的 Wordpress 页脚中使用了这段代码，Wordpress 在每一页上复制页脚，所以代码被应用到每一页。所以我认为在你的 jQuery 脚本旁边有一个 script 标记，甚至与 jQuery 代码共享相同的 script 标记。

谢谢，我为代码插入了另一个部分，现在它可以工作了！ :)