alpinejs-sticky/dist/sticky.min.js

Add classes when an element is stuck in the viewport

(()=>{function u(n,t,e,i){n&&n.forEach(function(o){i.classList.add(o)}),window.addEventListener("scroll",function(){n&&n.forEach(function(o){i.classList.toggle(o,window.scrollY===0)}),t.forEach(function(o){i.classList.toggle(o,e.getBoundingClientRect().top===0&&window.scrollY>0)})})}function p(n,t,e,i){let o=n[0];t&&t.forEach(function(r){i.classList.toggle(r,o.intersectionRatio===1)}),e.forEach(function(r){i.classList.toggle(r,o.intersectionRatio<1)})}function a(n,t,e,i,o){new IntersectionObserver(c=>p(c,t,e,o),{rootMargin:n,threshold:1}).observe(i)}function d(n){n.directive("sticky",(t,{expression:e,modifiers:i})=>{let o=i.find(f=>f==="wait"),r=i.find(f=>f!=="wait"),c=r?document.querySelector(`.${r}`):t,g=t.getAttribute("x-sticky-root")||"-1px 0px 0px 0px",l=e.split(" "),s=t.getAttribute("x-sticky-inactive")||"";s=s?s.split(" "):!1,o?u(s,l,c,t):a(g,s,l,c,t)})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(d));})();