alpinejs-sticky
Version:
Add classes when an element is stuck in the viewport
2 lines (1 loc) • 897 B
JavaScript
function u(e,t,r,i){e&&e.forEach(function(o){i.classList.add(o)}),window.addEventListener("scroll",function(){e&&e.forEach(function(o){i.classList.toggle(o,window.scrollY===0)}),t.forEach(function(o){i.classList.toggle(o,r.getBoundingClientRect().top===0&&window.scrollY>0)})})}function p(e,t,r,i){let o=e[0];t&&t.forEach(function(n){i.classList.toggle(n,o.intersectionRatio===1)}),r.forEach(function(n){i.classList.toggle(n,o.intersectionRatio<1)})}function a(e,t,r,i,o){new IntersectionObserver(c=>p(c,t,r,o),{rootMargin:e,threshold:1}).observe(i)}function d(e){e.directive("sticky",(t,{expression:r,modifiers:i})=>{let o=i.find(f=>f==="wait"),n=i.find(f=>f!=="wait"),c=n?document.querySelector(`.${n}`):t,g=t.getAttribute("x-sticky-root")||"-1px 0px 0px 0px",l=r.split(" "),s=t.getAttribute("x-sticky-inactive")||"";s=s?s.split(" "):!1,o?u(s,l,c,t):a(g,s,l,c,t)})}var m=d;export{m as default};