Show/hide meta-header while scrolling

[nerkess]

Please describe the feature you would like to request.
in a virtual scrollable table I would like to be able to hide a meta-header, if user scrolls down, and show this meta-header, if user scrolls up.

What is the use-case or motivation for this proposal?
I think such headers are much needed (I need that meta-header for my actual project :D )

Is there anything else we should know?
For detecting scrolling direction I use ScrollDispatcher from Angular Material

onScroll(data: CdkScrollable){
    const scrollTop = data.getElementRef().nativeElement.scrollTop || 0;
    if(this.lastOffset > scrollTop){
        console.log('Show header');
    }else if(scrollTop < 10){
        console.log('Show header');
    }else if(scrollTop > 100){
        console.log('Hide header');
    }

    this.changeDetectorRef.detectChanges();
    this.lastOffset = scrollTop;
}

[shlomiassaf]

Hi @nerkess

This is done using "sticky" rows.

You can read more in the documentation

[nerkess]

Thank you for your quick reply. Sticky row doesn't hide, if user scrolls down. So I need it like the header is type: "row" if user scrolls down and type: "sticky" if user scrolls up. Is it possible?
Here is the link for an example of desired behavior:
https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
Or do you mean the showHeader Input? But it does not affect meta-header.