-
Notifications
You must be signed in to change notification settings - Fork 6
/
useSticky.ts
45 lines (36 loc) · 1.26 KB
/
useSticky.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import {RefObject, useState} from 'react';
import {useEffectOnce, useLatest} from 'react-use';
const events: ReadonlySet<keyof WindowEventMap> = new Set<keyof WindowEventMap>([
'resize',
'scroll',
'touchstart',
'touchmove',
'touchend',
'pageshow',
'load',
'orientationchange',
]);
export function useSticky<T extends HTMLElement>(elemRef: RefObject<T>) {
const [sticky, setSticky] = useState(false);
const stickyRef = useLatest(sticky);
useEffectOnce(() => {
observe();
for (const eventName of events) {
window.addEventListener(eventName, observe, true);
}
return () => {
for (const eventName of events) {
window.removeEventListener(eventName, observe, true);
}
};
function observe() {
if (!elemRef.current) return;
const refPageOffset = elemRef.current.getBoundingClientRect().top;
const stickyOffset = parseInt(getComputedStyle(elemRef.current).top, 10);
const stickyActive = refPageOffset <= stickyOffset;
if (stickyActive && !stickyRef.current) setSticky(true);
else if (!stickyActive && stickyRef.current) setSticky(false);
}
});
return sticky;
}