Pin when browser chrome is expanded

[joeyhoer]

In iOS, there are actions that will expand the browser chrome (address bar and toolbar) that are not scroll events or are inverse to the present logic of headroom. Two examples that I know of:

1. Scrolling past the bottom of the page (into the rubber banding area) when already at the bottom
   • This is inverse to the present logic (i.e. a "scroll down" event expands the chrome)
2. Tapping anywhere in the 40px near the bottom of the screen
3. Tapping on the collapsed address bar
4. Clicking a anchor link

There may be more such events.

I've determined that you can detect when the browser chrome is displayed by listening for the resize event and comparing the window.innerHeight which is updated to match the size of the viewport minus the window chrome.

headroom.maxInnerHeight = 0;
document.addEventListener('resize', function(){
 if (window.innerHeight > headroom.maxInnerHeight) {
    headroom.maxInnerHeight = window.innerHeight
  }
  window.chrome = (window.innerHeight < headroom.maxInnerHeight)
  if (window.chrome) {
    headroom.pin();
  } else {
    headroom.unpin();
  }
});

This works well, but we may want to include some more solid logic in headroom itself.