title: IntersectionObserver: find out when element is outside viewport
body: <p>Using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="nofollow noreferrer">IntersectionObserver API</a>, how can I find out when a particular element is outside of the viewport?</p>
  
  <p>As soon as the user scrolls past the header, and the header is therefore no longer inside the viewport, I need to output a console log. I want to use the <code>IntersectionObserver</code> instead of a scroll event listener to minimalize load as it works asynchronously. The code I have so far is:</p>
  
  <pre><code>let options = {
     root: null, //root
     rootMargin: '0px',
     threshold: 1.0,
   };
  
   function onChange(changes, observer) {
      changes.forEach(change =&gt; {
         if (change.intersectionRatio &lt; 0) {
            console.log('Header is outside viewport');
          }
      });
    }
  
    let observer = new IntersectionObserver(onChange, options);
  
    let target = document.querySelector('#header');
    observer.observe(target);
  </code></pre>
  
  <p>This code does not output any console logs. PS: my <code>&lt;header&gt;</code> element has an ID of <code>header</code>.</p>