72 lines
2.1 KiB
JavaScript
72 lines
2.1 KiB
JavaScript
import StickyFill from 'stickyfilljs';
|
|
|
|
export const createPlaceholder = () => {
|
|
const placeholder = document.createElement('div');
|
|
placeholder.classList.add('sticky-placeholder');
|
|
|
|
return placeholder;
|
|
};
|
|
|
|
export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
|
|
const top = Math.floor(el.offsetTop - scrollY);
|
|
|
|
if (top <= stickyTop && !el.classList.contains('is-stuck')) {
|
|
const placeholder = insertPlaceholder ? createPlaceholder() : null;
|
|
const heightBefore = el.offsetHeight;
|
|
|
|
el.classList.add('is-stuck');
|
|
|
|
if (insertPlaceholder) {
|
|
el.parentNode.insertBefore(placeholder, el.nextElementSibling);
|
|
|
|
placeholder.style.height = `${heightBefore - el.offsetHeight}px`;
|
|
}
|
|
} else if (top > stickyTop && el.classList.contains('is-stuck')) {
|
|
el.classList.remove('is-stuck');
|
|
|
|
if (
|
|
insertPlaceholder &&
|
|
el.nextElementSibling &&
|
|
el.nextElementSibling.classList.contains('sticky-placeholder')
|
|
) {
|
|
el.nextElementSibling.remove();
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Create a listener that will toggle a 'is-stuck' class, based on the current scroll position.
|
|
*
|
|
* - If the current environment does not support `position: sticky`, do nothing.
|
|
*
|
|
* @param {HTMLElement} el The `position: sticky` element.
|
|
* @param {Number} stickyTop Used to determine when an element is stuck.
|
|
* @param {Boolean} insertPlaceholder Should a placeholder element be created when element is stuck?
|
|
*/
|
|
export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
|
|
if (!el) return;
|
|
|
|
if (
|
|
typeof CSS === 'undefined' ||
|
|
!CSS.supports('(position: -webkit-sticky) or (position: sticky)')
|
|
)
|
|
return;
|
|
|
|
document.addEventListener(
|
|
'scroll',
|
|
() => isSticky(el, window.scrollY, stickyTop, insertPlaceholder),
|
|
{
|
|
passive: true,
|
|
},
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Polyfill the `position: sticky` behavior.
|
|
*
|
|
* - If the current environment supports `position: sticky`, do nothing.
|
|
* - Can receive an iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement.
|
|
*/
|
|
export const polyfillSticky = el => {
|
|
StickyFill.add(el);
|
|
};
|