In-page-navigation can select wrong item when header is not first element

[kevindew]

If you have content above the first header in the page you can hit various oddities with the in-page-navigation. I'm thinking this happens because it only considers an item on page if it is at the very top of the viewport or hidden.

Example screenshot:

You can replicate by adding some text above content and then scrolling the page (probably quickly as I imagine the debounced events are a factor in this)

This is referenced in https://github.com/alphagov/tech-docs-template/issues/110 but before we knew that the problem was elements before the header and I felt it was better