環境

"react": "^18.2.0",
"@mui/material": "^5.13.2",

忙しい方向けの結論

<AppBar position="fixed">

ではなく

<AppBar position="sticky">

を使いましょう。

ヘッダーを上部固定する方法

他のWebサイトを見ると、画面スクロールしてもヘッダーが上部に固定されてついてくるという仕様になっているサイトが多く、真似しようと調べ始めました。

この方法については特に難しくなく、

<AppBar position="static">

ではなく

<AppBar position="fixed">

とpropを変更することで実現できました。

position="static"だと画面スクロール時にヘッダーが隠れてしまいますが、position="fixed"にすると、常にヘッダーが上部固定されるようになりました。

fixedの弊害

ヘッダー下部のコンテンツがヘッダーの下に隠れてしまいます。
position="fixed"にすると、ヘッダーが一つ上のレイヤーになってしまうようで、本文のコンテンツがそのレイヤー上でy=0だと認識されることで重なるようです。

↓こちらのサイト様に分かりやすい図解があるので合わせて参照してみてください。

こちらのサイトでの解決法は、本文コンテンツの上部にHeaderの高さ分のPaddingを履かせるというものでした。

Material-UI (v4)での解決法

この問題を解決するためにググると、現状はMaterial-UI(v4)での解決法ばかり出てきます。

v4でのスタイリング記法であるmakeStylesなどを用いて書く方法はだいたいこんな感じです。

const useStyles = (theme: Theme) => {
    return makeStyles({
        root: {
            flexGrow: 1
        },
        flex: {
            flex:1
        },
        menuButton: {
            marginLeft: -12,
            marginRight:20
        },
        toolbarMargin:theme.mixins.toolbar
    })
}

詳しくは参照サイト様を御覧ください。

MUI (v5)での解決方法

私が今触っているMUI(Version 5)では、スタイリング記法がsx propに代わったため、どのように書けばよいか分からず右往左往していたのですが、やはり頼りになるのは公式…！

こちらの公式ドキュメントに以下のような記述がありました。

Fixed placement
When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions:

アプリバーの位置を固定してレンダリングすると、要素の寸法はページの他の部分に影響を与えません。このため、コンテンツの一部がアプリバーの後ろに隠れて見えなくなることがあります。(DeepLで翻訳)

この解決法として3つ紹介されていますが、今回使用したのは1番目の解決策であり、これがいちばん簡単だと思います。

<AppBar position="sticky">

このように指定するとヘッダーが上部に固定されて、かつコンテンツを隠さないようにしてくれます。
この方法の欠点としてIE11に対応していない、という点が書かれていますが、御存知の通りIEのサポートは2022年6月15日に終わっているので、大手を振ってstickyを使えるでしょう。

おわりに

公式ドキュメントを読もう！！！！！

MUI(v5)でHeaderを上部固定するとコンテンツの上部が隠れる問題の解決法

環境