hazmat-suite/assets/js/functions-new-landing.js

jQuery(document).ready(function($) {
	
	(function() {
		const sections = [
			  document.getElementById('ch-ggs-web-suite-section-01'),
			  document.getElementById('ch-ggs-web-suite-section-02'),
			  document.getElementById('ch-ggs-web-suite-section-03'),
			];
			
			const navItems = {
			  'ch-ggs-web-suite-section-01': document.getElementById('ch-ggs-web-suite-nav-item-01'),
			  'ch-ggs-web-suite-section-02': document.getElementById('ch-ggs-web-suite-nav-item-02'),
			  'ch-ggs-web-suite-section-03': document.getElementById('ch-ggs-web-suite-nav-item-03'),
			};
			
			// intersection observer setup
			const observerOptions = {
			  root: null,
			  rootMargin: '0px',
			  threshold: 0.7,
			};
			
			function observerCallback(entries, observer) {
			  entries.forEach((entry) => {
			    if (entry.isIntersecting) {
			      // get the nav item corresponding to the id of the section
			      // that is currently in view
			      const navItem = navItems[entry.target.id];
			      // add 'active' class on the navItem
			      navItem.classList.add('active');
			      // remove 'active' class from any navItem that is not
			      // same as 'navItem' defined above
			      Object.values(navItems).forEach((item) => {
			        if (item != navItem) {
			          item.classList.remove('active');
			        }
			      });
			    }
			  });
			}
			
			const observer = new IntersectionObserver(observerCallback, observerOptions);
			
			sections.forEach((sec) => observer.observe(sec));
	})();
	
	(function() {
			
		const sentinelEl = document.getElementById('ch-ggs-web-suite-landing-nav-trigger');
		const headerEl = document.getElementById('ch-ggs-web-suite-landing-nav');
		const stuckClass = 'stuck';
		
		const handler = (entries) => {
		  if (headerEl) {
		    if (!entries[0].isIntersecting) {
		      headerEl.classList.add(stuckClass);
		    } else {
		      headerEl.classList.remove(stuckClass);
		    }
		  }
		}
		
		const observer = new window.IntersectionObserver(handler);
		observer.observe(sentinelEl);
	})();
})