is in viewport js

document.addEventListener("DOMContentLoaded", () => {
  const isInViewport = el => {
    // var bounding = element.getBoundingClientRect();
    // return !(bounding.top > innerHeight || bounding.bottom < 0);

    const scroll = window.scrollY || window.pageYOffset;
    const boundsTop = el.getBoundingClientRect().top + scroll;
    const viewport = {
      top: scroll,
      bottom: scroll + window.innerHeight
    };

    const bounds = {
      top: boundsTop,
      bottom: boundsTop + el.clientHeight
    };

    return (
      (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
      (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
    );
  };

  let about = document.querySelector("#about");
  let experience = document.querySelector("#experience");
  let education = document.querySelector("#education");
  let skills = document.querySelector("#skills");
  let interests = document.querySelector("#interests");
  let awards = document.querySelector("#awards");


  let changeOpacity = (elem, elemName) => {
    let elemChange = document.getElementById(`${elemName}Side`);
    if (isInViewport(elem)) {

      elemChange.style.opacity = 1;
    } else {
      elemChange.style.opacity = 0.5;
    }
  };

  document.addEventListener("scroll", event => {
    changeOpacity(about, "about");
    changeOpacity(experience, "experience");
    changeOpacity(education, "education");
    changeOpacity(skills, "skills");
    changeOpacity(interests, "interests");
    changeOpacity(awards, "awards");
  });


});