this repo has no description
Make lazy shazam ignore top sticky header
+5
-1
+5
-1
src/components/lazy-shazam.jsx
+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
}, []);