Material design (Android like) behavior on a web a

Question

Scenario

We got a mat-toolbar and a mat-tab-group - the behavior we need is like the GIF below i.e. when we scroll down, the mat-tab-group (Cats in the gif below) is scrollable and the mat-toolbar (Pets in the gif below) hides away, only to show up again after we scroll back up.

The code

Approaches i tried:

1. Tried to use the scroll event, but unable to ascertain if the scroll was up or down because the offsetHeight and offsetTop numbers didn't change. offsetTop & offsetHeight change when the complete window scrolls, the values didn't change with our scroll which is inside the mat-tab-group.
2. Tried an observable to the mouse scroll, which works on the overall page, but stops capturing the scroll within our mat-list

Question:

• How to capture the scroll inside the mat-tab-group ?
• If this is not the correct way to achieve it, looking for guidance on the correct approach
• the GIF was taken from Material Design standard