title: How can I add or remove shadows from a td / th with "position: sticky" on scroll?
body: <p>I made a table with the header and the last column fixed using <code>position: sticky</code>. I want to remove the shadows from the last column when the scroll bar is horizontally at the end, and remove the shadows from the header when the scroll bar is vertically at the beginning. <a href="https://ant.design/components/table/#components-table-demo-fixed-columns-header" rel="nofollow noreferrer">In AntDesign there is an example</a> of the desired result, but in this case the table has shadows only in the fixed columns, not in the header.</p>
  
  <p>Although I don't want solutions with Scroll Event Listener because of performance reasons (see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects" rel="nofollow noreferrer">Scroll-linked effects</a>), if someone solves it that way, they can share it for reference and help other people.</p>
  
  <p>The code is also available at <a href="https://codesandbox.io/s/table-with-fixed-column-and-headers-h37kf" rel="nofollow noreferrer">CodeSandbox</a>.</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>main {
    display: flex;
    max-height: 20rem;
    overflow: auto;
  }
  
  table {
    border-spacing: 0;
  }
  
  th {
    text-align: left;
  }
  
  th,
  td {
    border-bottom: 1px solid #c6c6c6;
    height: 5rem;
    white-space: nowrap;
    padding-right: 2rem;
  }
  
  .fixed {
    background-color: white;
    position: sticky;
  }
  
  .fixed-top {
    box-shadow: 4px 3px 5px 0px rgba(0, 0, 0, 0.2);
    top: 0;
    z-index: 1;
  }
  
  .fixed-right {
    border-left: 1px solid #c6c6c6;
    box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.2);
    padding-left: 1rem;
    right: 0;
    z-index: 1;
  }
  
  .fixed-top.fixed-right {
    box-shadow: 4px 3px 5px 0px rgba(0, 0, 0, 0.2), -5px 0px 5px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="fixed fixed-top"&gt;Animal&lt;/th&gt;
        &lt;th class="fixed fixed-top"&gt;Age&lt;/th&gt;
        &lt;th class="fixed fixed-top"&gt;Country&lt;/th&gt;
        &lt;th class="fixed fixed-top"&gt;Sentence&lt;/th&gt;
        &lt;th class="fixed fixed-top"&gt;Color&lt;/th&gt;
        &lt;th class="fixed fixed-top fixed-right"&gt;Programming Language&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Sable&lt;/td&gt;
        &lt;td&gt;15 yo&lt;/td&gt;
        &lt;td&gt;Japan&lt;/td&gt;
        &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/td&gt;
        &lt;td&gt;Purple&lt;/td&gt;
        &lt;td class="fixed fixed-right"&gt;Kotlin&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Toco toucan&lt;/td&gt;
        &lt;td&gt;35 yo&lt;/td&gt;
        &lt;td&gt;Brazil&lt;/td&gt;
        &lt;td&gt;
          Sed tortor erat, imperdiet a enim quis, placerat rhoncus nisl.
        &lt;/td&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td class="fixed fixed-right"&gt;Swift&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Bull&lt;/td&gt;
        &lt;td&gt;42 yo&lt;/td&gt;
        &lt;td&gt;Spain&lt;/td&gt;
        &lt;td&gt;Donec vitae risus urna.&lt;/td&gt;
        &lt;td&gt;Red&lt;/td&gt;
        &lt;td class="fixed fixed-right"&gt;JavaScript&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Brown bear&lt;/td&gt;
        &lt;td&gt;17 yo&lt;/td&gt;
        &lt;td&gt;Russia&lt;/td&gt;
        &lt;td&gt;Proin gravida et velit ut congue.&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
        &lt;td class="fixed fixed-right"&gt;Python&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>