Apply a class to a specific section on a website as the user scrolls.

gistfile1.txt

  // Function to handle the intersection of the observed element
  function handleIntersection(entries, observer) {
    entries.forEach(entry => {
      const targetSection = document.getElementById('tetosection'); // Replace 'tetosection' with your section's ID
      if (entry.target === targetSection) {
        if (entry.isIntersecting) {
          targetSection.classList.add('highlightsc');
        } else {
          targetSection.classList.remove('highlightsc');
        }
      }
    });
  }

  // Set up the Intersection Observer
  const options = {
    threshold: 0.5 // Adjust this threshold as needed (0.5 means 50% of the section is visible)
  };

  const observer = new IntersectionObserver(handleIntersection, options);

  // Start observing the target section
  const targetSection = document.getElementById('tetosection'); // Replace 'tetosection' with your section's ID
  observer.observe(targetSection);