title: Change background color of header on scroll
body: <p>I want to change the background color of my header (from transparent to black) when it scrolls. How can I do this?</p>
  <p>I use a CMS to create the header. That is my code at the moment:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
    jQuery(function($) {
      $(window).scroll(function() {
        if ($(document).scrollTop() &gt; 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');
        }
      });
    });
  &lt;/script&gt;
  
  &lt;style&gt;
    .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;
    }
  &lt;/style&gt;
  </code></pre>