title: Add shadow on scoll under header
body: <p>I have a header like so:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header-wrapper {
    padding: 32px 24px 0 24px;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: $color-white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header-wrapper"&gt;
    &lt;h2 data-qa="customersTitle" class="header-label"&gt;Customers&lt;/h2&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The <code>header-wrapper</code> class is written like above and <strong>cannot be changed</strong>. It <strong>must have</strong> a <code>display:flex;</code> attribute, otherwise some elements break.</p>
  <p>What I need is: after scrolling a little bit, a shadow to appear under the header. How can I do that? (If I don't use <code>display:flex</code> it works. But i <strong>need</strong> to use it)</p>
  <p>Thanks a lot in advance!</p>