RxJS Challenge #7: Disappearing sticky header

When you scroll a page on your smartphone, the address bar disappears, but it appears again on scrolling up. You might have also seen similar behavior with page headers. Let’s try to implement it with RxJS and a little CSS!

Setting up CSS

This task would require some CSS knowledge, but pretty basic. We need to use position: sticky on our header and we will create a special class for when it’s hidden:

Note how we use different values for transition. That is because when we start scrolling up we want our header to immediately transition into the viewport, but if we scroll down we delay the transition so it doesn’t go away instantly in case we might scroll back up again.

Toggling a class

Toggling a class with RxJS stream in Angular is very easy. We just use async pipe and class binding: [class.hidden]="hidden$ | async". Now let’s build our stream: