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!