this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Make lazy shazam ignore top sticky header

+5 -1
+5 -1
src/components/lazy-shazam.jsx
··· 4 4 import { useLayoutEffect, useRef, useState } from 'preact/hooks'; 5 5 import { useInView } from 'react-intersection-observer'; 6 6 7 + // The sticky header, usually at the top 8 + const TOP = 48; 9 + 7 10 export default function LazyShazam({ children }) { 8 11 const containerRef = useRef(); 9 12 const [visible, setVisible] = useState(false); ··· 11 14 12 15 const { ref } = useInView({ 13 16 root: null, 17 + rootMargin: `-${TOP}px 0px 0px 0px`, 14 18 trackVisibility: true, 15 19 delay: 1000, 16 20 onChange: (inView) => { ··· 25 29 useLayoutEffect(() => { 26 30 if (!containerRef.current) return; 27 31 const rect = containerRef.current.getBoundingClientRect(); 28 - if (rect.bottom > 0) { 32 + if (rect.bottom > TOP) { 29 33 setVisibleStart(true); 30 34 } 31 35 }, []);