はじめに
環境
-
react: "^17.0.0 || ^18.0.0",
- @mui/material:^5.15.9
- @emotion/react:^11.11.3
- @emotion/styled:^11.11.0
実装
下にスクロールしたときにAppBar(ヘッダー)が隠れるようにする処理です。
リファレンスにも記されていますが、備忘録として記します。
components/layout/header.tsx
import { AppBar, Slide } from "@mui/material";
import useScrollTrigger from '@mui/material/useScrollTrigger';
const Header = () => {
const trigger = useScrollTrigger();
return (
<Slide in={!trigger}>
<AppBar position="fixed">ヘッダー</AppBar>
</Slide>
);
}
export default Header;
MUIの Slide コンポーネントは、要素の表示・非表示のアニメーションが適用されます。
useScrollTrigger() でスクロールイベントに応じ true | false を返します。
in
プロパティは、スライドインのアニメーションを実行します。
つまり、スクロールが停止したら、スライドインをします。
方向を指定したい場合は、Slide に direction プロパティを設けます。