title: IntersectionObserver method not working - Javascript
body: <p>I have a div that I want to change color when it scrolls into the viewport, and I'm trying to achieve this with the new <code>intersectionObserver</code> method. I've set my parameters in the config callback, but I can't seem to get the observer itself to add the class to change the background color?</p>
  
  <p>Any help would be amazing.</p>
  
  <p>codepen: <a href="https://codepen.io/emilychews/pen/mXVBVK" rel="nofollow noreferrer">https://codepen.io/emilychews/pen/mXVBVK</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const config = {
    root: null,  // sets the framing element to the viewport
    rootMargin: '0px',
    threshold: 0.5
  };
  
  const box = document.getElementById('box');
  
  let observer = new IntersectionObserver(function(entries) {
    observer.observe(box);
    entries.forEach(function(item){
      item.classList.add("active");
    });
  }, config);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0; padding: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 300vh;
  }
  
  #box {
    width: 100px; 
    height: 100px;
    background: blue;}
  
  .active {background: red;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>