intersection observer with loop

// Callback function to execute when intersections are detected

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in view');
      // Perform actions like loading images, animations, etc.
    } else {
      console.log('Element is out of view');
    }
  });
};

// Options object

const options = {
  root: null, // relative to the viewport
  rootMargin: '0px', // margin around the root
  //threshold: 0.1 // trigger callback when 10% of the element is visible
  treshold: 0, //means out of the viewport
};

// Create an instance of IntersectionObserver with the callback and options

const observer = new IntersectionObserver(callback, options);

// Target element to be observed

const target = document.querySelector('.target-element');

// Start observing the target element

observer.observe(target);

 const options = {
        rootMargin: '0px 0px -200px 0px'
    }

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                entry.target.classList.add('show');
                observer.unobserve(entry.target);
            } else {
                return;
            }
        })
    }, options);

    const h1 = document.querySelector('h1'); // targets one element
    observer.observe(h1);

    const paras = document.querySelectorAll('p'); 
    paras.forEach(p => observer.observe(p)); //targets multple element with a loop

// intersection observer using a function
const ObserverTemplate = () => {

  const options = {
    rootMargin: '0px 0px -200px 0px',
    threshold: 0.5
  }

  const textObserver = new IntersectionObserver((entries) => {

      entries.forEach((entry) => {
            if(entry.isIntersecting){
              entry.target.classList.add('show')
            }else{
              entry.target.classList.remove('show')
            }
      })
  }, options)

  const h1Tag = getElement('h1')
  // console.log(h1Tag)

  textObserver.observe(h1Tag)
  
}



window.addEventListener('DOMContentLoaded', ObserverTemplate)

const sections = document.querySelector('.section--2');

const options = {
  rootMargin: '0px',
  threshold: 0.8
}

function handleSections(entries){
    entries.forEach((entry) => {
    if(entry.isIntersecting){
     entry.target.classList.add()
    }else{
      entry.target.style.backgroundColor = 'transparent'
    }
    })
}

const sectionObserver = new IntersectionObserver(handleSections, options);

sectionObserver.observe(sections)

// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

function removeTransition(e){
  console.log(e.propertyName)
  // can do a condition based on a property or add a property using setProperty
  //example
  
   this.style.setProperty("background-color", 'blue');
  
  // a a consition to
 	if(e.propertyName !== 'transform') return
  	this.classList.remove('playing');
 
}


const keys = [...document.querySelectorAll('.key')]; //loop over all items clicked
keys.forEach((key) => key.addEventListener('transitionend', removeTransition))

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const cities = [];
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

const fetchData = async(url) => {
    const response = await fetch(url)
    const data = await response.json();
    return data;
}


function displayItems(cities){
    const items = cities.map((place) => {
      return `
      <li>
        <span class="name">${place.city}</span>
        <span class="population">${place.population}</span>
      </li>
    `;
  }).join('');
  suggestions.innerHTML = items;

}



const startApp = async() => {

    const citiesData = await fetchData(endpoint);
    cities.push(...citiesData);  
    displayItems(cities)

    searchInput.addEventListener('keyup', function(e){
      const value = e.target.value;
      const regex = new RegExp(value, 'gi');
      const filteredCities = cities.filter((place) => {
       return place.city.match(regex);
      })

      displayItems(filteredCities);
    })

}


startApp();

    const slickTrack = document.querySelector(`.slick-track`);
    new MutationObserver((entries) => {
      entries.forEach((mutationRecord) => {
        if (photosSwipedOrButtonsCLicked) return;
        log('style has transition: ', mutationRecord.target.getAttribute('style').includes('transition'));
        if (mutationRecord.target.getAttribute('style').includes('transition')) {
          sendEvent(100322757);
          photosSwipedOrButtonsCLicked = true;
        } else {
          log('targeted mutation does not include transition style');
        }
      });
    }).observe(slickTrack, {
      attributes: true,
    }); 

 const options = {
    root: document.getElementById('some-id'), // leave blank for viewport
    rootMargin: '0px',
    threshold: 1.0,
  };
  
  const observer = new IntersectionObserver(observeTestamonialInViewPortCB, options);

  const observeTestamonialInViewPortCB = (entries, observer) => {
    entries.forEach((entry) => {
      log(entry);
	// to stop observer:
	observer.unobserve();
    });
  };

  const target = document.getElementById('target-element');
  observer.observe(target);

  // let stillIntersecting;

  // const waitForThreeSecondsTimeOut = (observer, targetTestimonialModule) => {
  //   setTimeout(() => {
  //     if (stillIntersecting) {
  //       // log('3 seconds yeah!');
  //       setAttributes({
  //         acrns264_user_sees_testimonials_module: 'true',
  //       });
  //       log('attribute set --- acrns264_user_sees_testimonials_module: true');
  //       observer.unobserve(targetTestimonialModule);
  //     }
  //   }, 3000);
  // };
 

  // utils.waitForElement('.card.marissa-card').then((targetTestimonialModule) => {
  //   const observer = new IntersectionObserver((entries, observer) => {
  //     entries.forEach((entry) => {
  //       if (entry.isIntersecting) {
  //         stillIntersecting = true;
  //         waitForThreeSecondsTimeOut(observer, targetTestimonialModule);
  //       } 

  //       if (!entry.isIntersecting) {
  //         stillIntersecting = false;
  //         clearTimeout(waitForThreeSecondsTimeOut);
  //         // log('user did not view testimonial for 3 seconds');
  //       }
  //     });
  //   }, {
  //     threshold: 1.0,
  //   });

  //   observer.observe(targetTestimonialModule);
  // }).catch(error);

func scrollToBottom(){
    DispatchQueue.main.async {
        let indexPath = IndexPath(row: self.dataArray.count-1, section: 0)
        self.tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }
}

<style>
 .spacer {
  height: 100vh;
}

a {
  color: #3d3d3d;
  font-family: Arial, Helvetica, sans-serif;
}
/* The magic one liner that allows for smooth scrolls */
html {
  scroll-behavior: smooth;
}

  /* Removes the animation for users that don't prefer it */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
  
 </style>

<h1 id="top"><a href="#middle">Let's go to the middle of the page</a></h1> 

<div class="spacer">
  &nbsp;
</div>

<h1 id="middle"><a href="#bottom">Go to the bottom?</a></h1>

<div class="spacer">
  &nbsp;
</div>

<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>

#page .page-section {position: sticky!important; top: 0px!important} html {scroll-behavior: smooth} 

Here is the code from this tutorial with a little bit of a shadow to create even more depth between these pages sections. 

#page .page-section {position: sticky!important; top: 0px; box-shadow: 5px 5px 15px rgba(0,0,0,0.8)!important} html {scroll-behavior: smooth}

<script>
  $(".modal__open").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'hidden'
    })
  })
  
  
  $(".modal__close").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'scroll'
    })
  })
</script>