Sticky footer not working

[annirak]

Hi, I have a table with sticky header & footer. The header is working fine, but the footer stops sticking after a couple of scrolls

[anissaba]

Hello,same problem.

[blogcraft]

Same Here.

[ahimik]

+1. I just started using virtual scrolling for the first time and immediately raised the same issue. I could be wrong since I spent just a few minutes looking into the code, but my impression that it can be fixed very easily, all you need is to change the following piece of code:

setSticky(offset) {
    this.scrollStrategy.viewport.elementRef.nativeElement.querySelectorAll(stickySelector)
      .forEach((el: HTMLElement) => {
        const parent = el.parentElement;
        let baseOffset = 0;
        if (this.stickyPositions.has(parent)) {
          baseOffset = this.stickyPositions.get(parent);
        }
        el.style.top = `-${-baseOffset + offset}px`;  <-- the problem is here. It should be bottom and positive for footer
      });
  }

, since both footer and header contains the same stickySelector both of them get negative top offset while footer needs positive bottom offset instead, so simply splitting stickySelector into two separate selectors: const stickyHeaderSelector= '.mat-header-row.mat-table-sticky' and const stickyFooterSelector='.mat-footer-row.mat-table-sticky' and then applying for header: el.style.top = -${-baseOffset + offset}px; and for footer: el.style.bottom = ${-baseOffset + offset}px; should fix the issue.

[diprokon]

Fixed in 1.3.3