title: How to change the sticky header background color on scroll in angular 11
body: <p>Tried to change the background color on scroll to the sticky header but not working. How to do it? when I scroll to the bottom of the body I need to change the header background color. How to do it?</p>
  <p>app.component.html</p>
  <pre><code>&lt;div class=&quot;header sticky&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>app.component.css</p>
  <pre><code> .sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
   }
  </code></pre>
  <p>Demo: <a href="https://stackblitz.com/edit/sticky-header-hyibz9?file=app%2Fheader%2Fheader.component.css" rel="nofollow noreferrer">https://stackblitz.com/edit/sticky-header-hyibz9?file=app%2Fheader%2Fheader.component.css</a></p>