toufali / custom-element-scroll-shadow

Uses Web Components/Custom Element to create a visual separation between fixed header and content upon scroll

Custom Element: Content Scroll Shadow

Creates visual separation between fixed header and content upon scroll

Demo

https://handsomemedia.github.io/custom-element-scroll-shadow/dist

Notes

• uses Web Components: Custom Elements, Shadow DOM, and Template
• self-contained HTML, CSS, and JS
• uses native Intersection Observer API - more performant than listening to scroll event
• Custom Elements and Shadow DOM currently need polyfill Firefox and Edge (not implemented here)
• Intersection Observer currently requires polyfill for Safari

Links

• https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133
• https://developers.google.com/web/fundamentals/web-components/customelements
• https://developers.google.com/web/fundamentals/web-components/shadowdom
• https://www.webcomponents.org/
• https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• https://github.com/w3c/IntersectionObserver/tree/master/polyfill
• https://caniuse.com/#feat=custom-elementsv1
• https://caniuse.com/#feat=shadowdomv1
• https://caniuse.com/#feat=template
• https://caniuse.com/#feat=intersectionobserver