title: Detect whether element is above or below the viewport on intersect leave with intersection observer
body: <p>I am currently using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="noreferrer">intersection observer</a> to detect when an element leaves the viewport. It is setup like this:</p>
  
  <pre><code>const el = document.querySelector('#el')
  const observer = new window.IntersectionObserver(([entry]) =&gt; {
    if (entry.isIntersecting) {
      console.log('LEAVE')
      return
    }
    console.log('ENTER')
  }, {
    root: null,
    threshold: 0,
  })
  
  observer.observe(el)
  </code></pre>
  
  <p>But I also want to know whether the element is above or below the viewport. Is there a way achieve this?</p>