mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-30 08:47:44 +01:00
50 lines
1.1 KiB
JavaScript
50 lines
1.1 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
export default function StickyHeader({
|
|
className,
|
|
stickyClassName,
|
|
stickyStyle,
|
|
children,
|
|
enabled = true,
|
|
}) {
|
|
const [sticky, setSticky] = useState(false);
|
|
const ref = useRef();
|
|
const top = useRef(0);
|
|
|
|
useEffect(() => {
|
|
const checkPosition = () => {
|
|
if (ref.current) {
|
|
if (!top.current) {
|
|
top.current = ref.current.offsetTop + ref.current.offsetHeight;
|
|
}
|
|
const state = window.pageYOffset > top.current;
|
|
if (sticky !== state) {
|
|
setSticky(state);
|
|
}
|
|
}
|
|
};
|
|
|
|
checkPosition();
|
|
|
|
if (enabled) {
|
|
window.addEventListener('scroll', checkPosition);
|
|
}
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', checkPosition);
|
|
};
|
|
}, [sticky, enabled]);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
data-sticky={sticky}
|
|
className={classNames(className, { [stickyClassName]: sticky })}
|
|
style={sticky ? { ...stickyStyle, width: ref?.current?.clientWidth } : null}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|