position: fixed;が効かない理由を暴く

こんにちは。今回はposition: fixed;が効かない理由とその対処法をまとめていきます。

なぜposition:fixed;が効かないのか | 親要素がtransformしていると効かない
どう対処するか
1. transform以外の方法が使えるならそちらを使う
2. 子要素をそれぞれtransformさせる
まとめ

なぜposition:fixed;が効かないのか | 親要素がtransformしていると効かない

例えばこんなヘッダーを作ろうとしています。こういうヘッダー、コーディングしてると結構出会います。

ページ読み込み時にしたからふわっと出てくる
グローバルナビがスクロールに追従する

見た目としてはこんな感じです。

さて、これをコーディングすると考えてみます。

まずは見た目はこんな感じでしょう。

<header class="Header" id="Header">
  <nav class="Nav">
    <ul class="List">
      <li class="List-Item"><a href="#">メニュー1</a></li>
      <li class="List-Item"><a href="#">メニュー2</a></li>
      <li class="List-Item"><a href="#">メニュー3</a></li>
    </ul>
  </nav>
</header>

.Header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #6ba6e7;
}

.Nav {
  position: fixed;
  top: 18px;
  right: 20px;
}

.List {
  display: flex;
  gap: 20px;
}

.List-Item {
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

アニメーションは以下のような形。

<script
  src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
  crossorigin="anonymous"
></script>

<script>
  window.onload = function () {
    $("#Header").addClass("FadeIn")
  }
</script>

.Header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #6ba6e7;
  transition: all 1s; //追加
  transform: translateY(30px);　//追加
  opacity: 0;　//追加
}

...省略

.FadeIn {
  transform: translateY(0);
  opacity: 1;
}

さて、こうするとなんとposition: fixed;を指定しているはずのグローバルナビ部分がスクロールに追従しません（試してみてください）。

これは親要素（今回は.Header）に、アニメーションのためのtransform: translateY(30px)が付与されているからです。

MDNのpositionプロパティのページ（https://developer.mozilla.org/ja/docs/Web/CSS/position）にも、fixedについて以下のように書かれています。

祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms 仕様書を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。

要するに、親要素にtransformなどの指定があるとposition: absolute;と同様の挙動になってしまうのです。

どう対処するか

transform以外の方法が使えるならそちらを使う

今回であれば.Headerと.Navのtopの値を調整すれば実現可能です。それぞれtranslateYを使った時と同様に最初の値を30pxずらします。

.Header {
  position: absolute;
  top: 30px; //変更
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #6ba6e7;
  transition: all 1s;
  opacity: 0;
}

.Nav {
  position: fixed;
  top: 48px; //変更
  right: 20px;
  transition: all 1s; //追加
  opacity: 0; //追加
}

...省略

//追加
.FadeIn__Nav {
  top: 18px;
  opacity: 1;
}

window.onload = function () {
  $("#Header").addClass("FadeIn")
  $("#Nav").addClass("FadeIn__Nav") //追加
}

これで想定通りの動きになります。

子要素をそれぞれtransformさせる

position: fixed;にしたい要素の親要素にtransformが指定されているのが問題なので、その状態さえ回避すれば良いです。背景とグローバルナビ部分を分け、それぞれをtransformさせます。

<header class="Header" id="Header">
  <div class="Header__Background js-FadeIn"></div> <!-- 追加 -->
  <nav class="Nav js-FadeIn"> <!-- js-FadeInというクラスを追加 -->
    <ul class="List">
      <li class="List-Item"><a href="#">メニュー1</a></li>
      <li class="List-Item"><a href="#">メニュー2</a></li>
      <li class="List-Item"><a href="#">メニュー3</a></li>
    </ul>
  </nav>
</header>

.Header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  //background-colorを削除
}

//追加
.Header__Background {
  width: 100%;
  height: 100%;
  background-color: #6ba6e7;
  transition: all 1s;
  transform: translateY(30px);
  opacity: 0;
}

.Nav {
  position: fixed;
  top: 18px;
  right: 20px;
  transition: all 1s;　 //追加
  transform: translateY(30px); //追加
  opacity: 0;　//追加
}

<script>
  window.onload = function () {
    $(".js-FadeIn").addClass("FadeIn") //.js-FadeInを対象に変更
  }
</script>

これで想定通りの動きになります。

まとめ

というわけで、position: fixed;が効かない理由と、その対処をまとめました。知らないとかなり対処が難しいので、ぜひ参考にしてください。