@stackoverfloweth/vue-compositions
Version:
A collection of reusable vue compositions.
34 lines • 1.3 kB
JavaScript
import { computed, ref, watch, toRef, toValue } from 'vue';
import { useIntersectionObserver } from '../useIntersectionObserver';
const usePositionStickyObserverDefaultOptions = {
rootMargin: '-1px 0px 0px 0px',
boundingElement: document.body,
};
export function usePositionStickyObserver(element, options) {
const elementRef = toRef(element);
const stuck = ref(false);
const observerOptions = computed(() => {
const { rootMargin: rootMarginOption, boundingElement: boundingElementOption } = toValue(options ?? {});
const rootMargin = rootMarginOption ?? usePositionStickyObserverDefaultOptions.rootMargin;
const root = boundingElementOption ?? usePositionStickyObserverDefaultOptions.boundingElement;
return {
threshold: [1],
rootMargin,
root,
};
});
function intersect(entries) {
entries.forEach(entry => {
stuck.value = entry.intersectionRatio < 1;
});
}
const { observe, unobserve } = useIntersectionObserver(intersect, observerOptions);
watch(elementRef, (newVal, oldVal) => {
unobserve(oldVal);
observe(newVal);
}, { immediate: true });
return {
stuck,
};
}
//# sourceMappingURL=usePositionStickyObserver.js.map