ngx-virtual-scroll #header doesn't work - scrolls header in html table even with #header included in thead element

Question

Issue is that the header in my table scrolls when I want the header row to stick.

The Css/Html

virtual-scroller {
  height: 37.7rem;
  min-width: 800px;

  thead th {
    background: white;
    position: sticky;
    top: 0;
  }
}

<div class="identifier-table-container">
    <virtual-scroller #scroll [items]="statusList">
        <table class="status-table" aria-describedby="Status Chart">
           <thead #header>
               <th class="table-cell-border column-header-date-text" *ngFor="let column of dateList"
             (click)="onSelectTimeSeriesColumn(column)">{{column}}
               </th>
           </thead>
           <tbody #container>
               <tr *ngFor="let data of scroll.viewPortItems; trackBy:trackTimeSeriesRuns">
                   <td class="table-cell-border context-id-text table-cell-border-rounded" style="background-color:{{data.identifierStatusColor}}">{{data.identifierId}}
                   </td>
                   <td *ngFor="let dataPoint of data.dataPointList"
                  class="table-cell-border-rounded" style="background-color:{{dataPoint.color}}"
                       {{dataPoint.timeSeries.numAppInstances}}
                   </td>
               </tr>
           </tbody>
      </table>
   </virtual-scroller>     
</div>

I'm expecting the header row to be sticky, but that doesn't occur with this scroller even though I've specified such in the CSS and used the #header reference tag as specified in the documentation. I've even tried using the reference in th tags. No go.