scroll - run a function for each class element when gets into view javascript

Question

I'm trying to build a portfolio site when the main page is a scroll of all the projects. I gave all the titles of the projects a fixed position with display 'none' and I want to change it to display 'block' only when a project section enters the viewport.

The code works! but only for the last class element of all the titles :(

This is how I wrote it, I would appreciate any help!

  var isInViewport = function (elem) {
      var bounding = elem.getBoundingClientRect();
      return (
          bounding.top >= 0 &&
          bounding.left >= 0 &&
          bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
  };


var projects = document.getElementsByClassName("proj");
for (x=0; x<projects.length; x++){
  var proj = projects[x];
  var head = proj.querySelector('.head');

  console.log(proj);
  window.addEventListener('scroll', function (event) {
      if (isInViewport(proj)) {
          head.style.display = "block"
      } else {
          head.style.display = "none"
          console.log(head);
      };
    }, false);
  };

Thanks!

question from:https://stackoverflow.com/questions/65643594/run-a-function-for-each-class-element-when-gets-into-view-javascript

Answer 1

Waitting for answers