RxJS Challenge #13: shrinking header
There’s a common UI pattern among mobile apps — to shrink header as you scroll down. It sticks to the top of the screen but proportionally scales to allow for more screen estate. Let’s make an RxJS stream inside a directive so we can reuse it!
Understanding the task
First, we need to make our header sticky with top: 0. Once we do it, it would always remain on top of the screen fully visible. To do our task we need to emit a number from 0 to 1. This number represents a portion of the header that would have been visible had it not been sticky 🧠
Here’s an illustration:
To figure this out we need to know initial top coordinate of the header. If it’s your site’s main header that is the topmost thing it’s easy — you just have 0. If it’s somewhere down the page you can use getBoundingClientRect
.
Be careful when you query it, sometimes when directive is instantiated the element is not yet attached to DOM, for example if it’s in the content of another component!