指定の要素が画面外に行った場合にヘッダーを表示する
よくある 指定の要素 (id: target) が画面外に行った場合にヘッダーを表示する実装。
ウィンドウのスクロール量を取得し、指定の要素のオフセットと高さを足し合わせた値より大きければヘッダーを表示する素朴な手段で実現できる。
React を使う場合は、 useEffect useCallback をうまく組み合わせてやると良い。
TypeScript を使用している場合は要素が取れなかった場合を考慮して null チェックしてあげるとより丁寧。
code:ts
export const Sample = () => {
const headerShown, setHeaderShown = useState(true);
const scrollY, setScrollY = useState(0);
const onScroll = useCallback(() => {
setScrollY(window.scrollY);
const anchorEl = document.getElementById("target");
if (!anchorEl) {
return;
}
setHeaderShown(scrollY > anchorEl.offsetTop + anchorEl.clientHeight);
}, scrollY);
useEffect(() => {
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, onScroll);
return (
<>
{headerShown && (
<header
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
background: "rgba(0, 0, 0, 0.5)",
}}
ヘッダー
</header>
)}
<div id="target" style={{ height: "200px" }}>
ターゲット
</div>
</>
);
};