Разрешить классу "реагирующий на таблицу" (scroll) по-прежнему работать с фиксированным элементом

Question

Я использую Angular 6 для создания таблицы.В настоящее время заголовок таблицы настроен так, чтобы он оставался зафиксированным в верхней части страницы, если пользователь прокручивает ее.Однако после применения моего «липкого» класса, у которого этот заголовок зафиксирован сверху, я, похоже, теряю функциональность начальной загрузки «реагирующий на таблицу» и больше не могу прокручивать по горизонтали.Как я могу оставить это включенным, чтобы заголовок был зафиксирован вертикально вверх, но при этом прокручивался горизонтально вместе с остальной частью таблицы?

мой класс "липких" css:

.sticky{
    position: fixed;
    top: 0;
    overflow: hidden;
    z-index: 12;
    background-color: #fff;
    width:92%;
    padding-bottom: 15px;
    padding-right:20px!important;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    -webkit-box-shadow-bottom:0px 1px 6px grey;
    -moz-box-shadow-bottom:0px 1px 6px grey;
    box-shadow:0px 1px 3px #cccccc;    
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

(после применения элементов в конце липкого класса я могу заставить заголовок таблицы все еще прокручиваться, но он не будет прикреплен к остальной части таблицы ниже)

Мой html:

<div class="table-responsive">
    <table id="tabletop" class="table">
        <thead>
            <tr #stickyMenu [class.sticky]="sticky">
                <th scope="col" id="th0">Monitoring Point</th>
                <th scope="col" id="th1">Network Health<br><small id="more_detail">(Click icon to see more detail)</small>
                </th>
                <th scope="col" id="th2">Active Alerts</th>
                <th scope="col" id="th3">Velocity (ft/s)</th>
                <th scope="col" id="th4">Water Temperature (°F)</th>
                <th scope="col" id="th5">Depth Readings (in)</th>
            </tr>
        </thead>
    </table>
    <div class="table-responsive"> -->
        <table id="tablebottom" class="table">
            <tbody >
                <tr *ngFor="let item of monitoring_points">
                    <app-sensor-summary [mp]="item"></app-sensor-summary>
                </tr>
            </tbody>
        </table>
    </div>
</div>

В моем компоненте я использую его, чтобы определить, где находится прокрутка по отношению к окну, и применяю класс, когда пользователь прокручивает мимо него:

@ViewChild("stickyMenu", {read: ElementRef}) tr: ElementRef;


ngAfterViewInit(){
  this.elementPosition = this.tr.nativeElement.getBoundingClientRect().top;
}

@HostListener('window:scroll', ['$event'])
  handleScroll(elementPosition) {
    this.sticky = (window.pageYOffset >= this.elementPosition);
  }