title: Scroll Trigger not working with a forEach() method - JavaScript
body: <p>I've done a simple scroll trigger that applies an animation when an element goes past 70% of the viewport height. Whilst working out how to do this I used a single element and <code>querySelector</code> and it all works fine.  </p>
  
  <p>Now that I'm testing on multiple elements I changed the code to <code>querySelectorAll</code> and therefore need to use a <code>forEach</code> method with a forEach variable <code>item</code>.  I cannot for the life of me get it to trigger with the <code>forEach</code> method though?</p>
  
  <p>Any help would be awesome.</p>
  
  <p>Codepen: <a href="https://codepen.io/pauljohnknight/pen/eywyyP" rel="nofollow noreferrer">https://codepen.io/pauljohnknight/pen/eywyyP</a></p>
  
  <p>P.S I forked the Codepen here <a href="https://codepen.io/pauljohnknight/pen/xpojao" rel="nofollow noreferrer">https://codepen.io/pauljohnknight/pen/xpojao</a> to show how it works with the single <code>querySelector</code> div if you need to see the intended behaviour</p>
  
  <p>JS</p>
  
  <pre><code>var box = document.querySelectorAll('.box');
  
  function scrollTrigger() {
  
    var boxPosition = box.getBoundingClientRect().top;
    var boxPositionPercent = (boxPosition / window.innerHeight) * 100;
  
      console.log(boxPositionPercent);
  
      box.forEach(function(item){
        if (boxPositionPercent &lt;= 70) {
              item.classList.add('scroll-active')
            } else {
              item.classList.remove('scroll-active')
            }
       });
   }
  
  window.addEventListener("scroll", scrollTrigger);
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {margin:0; padding: 0; width: 100%; height: 300vh; display:flex; justify-content: center; align-items: center; flex-direction: column;}
  
  .box{
    position: relative;
    width: 50px; 
    background: blue;
    height: 50px;
    opacity: .1;
    margin-bottom: 30px;}
  
  .scroll-active {
    opacity: 1;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  </code></pre>