The JavaScript function adds a scroll event listener to the window object, which checks if the user has scrolled down to a specific element with the ID "ends". If the user has scrolled down to the element, it displays elements with the class "myClass", otherwise it hides them and adds the classes "energize" and "fadeIn" to their class list.

ends.js

window.addEventListener('DOMContentLoaded', () => {
  const ends = document.querySelectorAll('#ends');
  if (ends.length) {
    window.addEventListener('scroll', () => {
      const t = ends[0].getBoundingClientRect().top - window.innerHeight;
      if (window.pageYOffset > t) {
        const myClass = document.querySelectorAll('.myClass');
        myClass.forEach(elem => elem.style.display = 'block');
      } else {
        const myClass = document.querySelectorAll('.myClass');
        myClass.forEach(elem => {
          elem.style.display = 'none';
          elem.classList.add('energize', 'fadeIn');
        });
      }
    });
  }
});