@elacity-js/uikit/dist/hooks/useStickyElement.js

React / Material UI Design kit for Elacity project

import { useRef, useCallback, useEffect } from 'react';

// @TODO: Need some review, last time it did not work properly
const STICKY = 'sticky';
// see https://remysharp.com/2017/06/29/smooth-scroll-with-sticky-nav
var useStickyElement = ({ $el, top }) => {
    const topEdge = top || 0;
    const lastPosition = useRef(null);
    const handleStikyElement = useCallback(() => requestAnimationFrame(() => {
        if ($el) {
            const currentScrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
            const elRect = $el.getBoundingClientRect();
            console.log(document.documentElement.scrollTop, lastPosition.current, elRect.top);
            // flow forward
            if (elRect.top <= topEdge) {
                if (!$el.classList.contains(STICKY)) {
                    $el.classList.add(STICKY);
                    $el.style.top = `${topEdge}px`;
                    $el.style.left = '0px';
                    if (!lastPosition.current) {
                        lastPosition.current = currentScrollPosition;
                    }
                }
            }
            // flow back
            if ($el.classList.contains(STICKY) && lastPosition.current > currentScrollPosition) {
                $el.classList.remove(STICKY);
                $el.style.top = '';
                $el.style.left = '';
                if (!lastPosition.current) {
                    lastPosition.current = null;
                }
            }
        }
    }), [$el]);
    useEffect(() => {
        window.addEventListener('load', handleStikyElement);
        window.addEventListener('scroll', handleStikyElement);
        return () => {
            window.removeEventListener('load', handleStikyElement);
            window.removeEventListener('scroll', handleStikyElement);
        };
    }, [$el]);
};

export { useStickyElement as default };
//# sourceMappingURL=useStickyElement.js.map