在滚动条上更改 header 的背景颜色

Question

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

我使用 CMS 创建 header。这是我目前的代码：

<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>

Answer 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>

在滚动条上更改 header 的背景颜色

Change background color of header on scroll

html

javascript

css

jquery

scroll