title: Run js function only if CSS class is available
body: <p>The problem is that the following function: </p>
  
  <pre><code>document.addEventListener("scroll", function(event) {
    // Check the viewport status
    if (inViewport(project1)) {
      pagination1.style.background = "#e3e3e3";
    } else {
      pagination1.style.background = "transparent";
    }
  });
  </code></pre>
  
  <p>gives an error every time I scroll on the page that doesn't have a DIV with the class 'project1' on it.</p>
  
  <p>Is there a way to trigger this function only when that DIV/class is set. Actually I'd like that the DIV itself triggers the function.</p>
  
  <p>Full code taking into account the answers below, but <strong>doesn't work yet</strong>: </p>
  
  <pre><code>"use strict";
  
  function inViewport(element) {
    // Get the elements position relative to the viewport
    var bb = element.getBoundingClientRect(); // Check if the element is outside the viewport
    // Then invert the returned value because you want to know the opposite
  
    return !(bb.top &gt; innerHeight || bb.bottom &lt; 0);
  }
  
  var hfirst1 = document.querySelector(".hashtag-first1");
  var hfirst2 = document.querySelector(".hashtag-first2");
  var hfirst3 = document.querySelector(".hashtag-first3");
  var hfirst4 = document.querySelector(".hashtag-first4");
  var hfirst5 = document.querySelector(".hashtag-first5");
  var hfirst6 = document.querySelector(".hashtag-first6");
  
  var hsecond1 = document.querySelector(".hashtag-second1");
  var hsecond2 = document.querySelector(".hashtag-second2");
  var hsecond3 = document.querySelector(".hashtag-second3");
  var hsecond4 = document.querySelector(".hashtag-second4");
  var hsecond5 = document.querySelector(".hashtag-second5");
  var hsecond6 = document.querySelector(".hashtag-second6");
  
  var hthird1 = document.querySelector(".hashtag-third1");
  var hthird2 = document.querySelector(".hashtag-third2");
  var hthird3 = document.querySelector(".hashtag-third3");
  var hthird4 = document.querySelector(".hashtag-third4");
  var hthird5 = document.querySelector(".hashtag-third5");
  var hthird6 = document.querySelector(".hashtag-third6");
  
  var n1 = document.querySelector(".name1");
  var n2 = document.querySelector(".name2");
  var n3 = document.querySelector(".name3");
  var n4 = document.querySelector(".name4");
  var n5 = document.querySelector(".name5");
  var n6 = document.querySelector(".name6");
  
  var d1 = document.querySelector(".details1");
  var d2 = document.querySelector(".details2");
  var d3 = document.querySelector(".details3");
  var d4 = document.querySelector(".details4");
  var d5 = document.querySelector(".details5");
  var d6 = document.querySelector(".details6");
  
  var project1 = document.querySelector(".project-trigger1");
  var project2 = document.querySelector(".project-trigger2");
  var project3 = document.querySelector(".project-trigger3");
  var project4 = document.querySelector(".project-trigger4");
  var project5 = document.querySelector(".project-trigger5");
  var project6 = document.querySelector(".project-trigger6");
  
  var pagination1 = document.querySelector(".bullet1");
  var pagination2 = document.querySelector(".bullet2");
  var pagination3 = document.querySelector(".bullet3");
  var pagination4 = document.querySelector(".bullet4");
  var pagination5 = document.querySelector(".bullet5");
  var pagination6 = document.querySelector(".bullet6"); // Listen for the scroll event
  
  
  document.addEventListener("scroll", function(event) {
    // check if exists
    if(document.getElementsByClassName("project-trigger1").length &gt; 0)
    {
      //then run the function
      pagination1.style.background = inViewport(project1) ? "#e3e3e3" : "transparent";
      hfirst1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
      hsecond1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
      hthird1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
      n1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
      n1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
    }
  });
  document.addEventListener("scroll", function(event) {
    // check if exists
    if(document.getElementsByClassName("project-trigger2").length &gt; 0)
    {
      //then run the function
      pagination2.style.background = inViewport(project2) ? "#e3e3e3" : "transparent";
      hfirst2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
      hsecond2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
      hthird2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
      n2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
      n2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
    }
  });
  document.addEventListener("scroll", function(event) {
    // check if exists
    if(document.getElementsByClassName("project3").length &gt; 0)
    {
      //then run the function
      pagination3.style.background = inViewport(project3) ? "#e3e3e3" : "transparent";
      hfirst3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
      hsecond3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
      hthird3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
      n3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
      n3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
    }
  });
  document.addEventListener("scroll", function(event) {
    // check if exists
    if(document.getElementsByClassName("project-trigger4").length &gt; 0)
    {
      //then run the function
      pagination4.style.background = inViewport(project4) ? "#e3e3e3" : "transparent";
      hfirst4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
      hsecond4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
      hthird4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
      n4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
      n4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
    }
  });
  document.addEventListener("scroll", function(event) {
    // check if exists
    if(document.getElementsByClassName("project-trigger5").length &gt; 0)
    {
      //then run the function
      pagination5.style.background = inViewport(project5) ? "#e3e3e3" : "transparent";
      hfirst5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
      hsecond5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
      hthird5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
      n5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
      n5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
    }
  });
  document.addEventListener("scroll", function(event) {
    // check if exists
    if(document.getElementsByClassName("project-trigger6").length &gt; 0)
    {
      //then run the function
      pagination6.style.background = inViewport(project6) ? "#e3e3e3" : "transparent";
      hfirst6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
      hsecond6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
      hthird6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
      n6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
      n6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
    }
  });
  </code></pre>
  
  <p><strong>Project is a portfolio site with up to 20+ projects (vertical displayed > all projects on top of each other) . Each project is a slider containing images of art projects. Project description, title and number should be displayed in the navigationbar on the top (position: fixed) only when the respective project scrolls into view.</strong></p>
  
  <p>The js script should be set up for 30+ projects which are added by cms gradually. This means that at the beginning some projects are set up in the js script but not yet added by cms. </p>