all AI news
Sticky is-stuck web-component
May 2, 2024, 4:26 a.m. | Mykolas Mankevicius
DEV Community dev.to
Here's a simple script to watch then a sticky element becomes stuck
class CoSticky extends HTMLElement {
connectedCallback() {
this.stickyObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
entry.target.toggleAttribute('data-sticky', entry.intersectionRatio === 1)
})
},
{
// root element is required for the rootMargin to work.
root: this.parentElement,
// rootMargin allows to trigger the callback before the element is fully out of view.
rootMargin: '-1px 0px 0px 0px',
threshold: 1,
},
)
this.stickyObserver.observe(this)
}
disconnectedCallback() {
this.stickyObserver?.disconnect()
}
}
customElements.define('co-sticky', …
callback class data element foreach javascript script simple web webdev work
More from dev.to / DEV Community
Jobs in AI, ML, Big Data
Software Engineer for AI Training Data (School Specific)
@ G2i Inc | Remote
Software Engineer for AI Training Data (Python)
@ G2i Inc | Remote
Software Engineer for AI Training Data (Tier 2)
@ G2i Inc | Remote
Data Engineer
@ Lemon.io | Remote: Europe, LATAM, Canada, UK, Asia, Oceania
Artificial Intelligence – Bioinformatic Expert
@ University of Texas Medical Branch | Galveston, TX
Lead Developer (AI)
@ Cere Network | San Francisco, US