• HTMLCSS

position: sticky;で要素が追従しない時の原因・対処方法

CSSのposition: sticky;を要素に指定したが追従しない。

本記事ではこのような悩みを解決します。

position: sticky;が機能しない原因

position: sticky;を使っても追従しない原因としては、親要素にoverflow: hidden;が指定されてる可能性があります。

overflow: hidden;の用途としては、 コンテンツからはみ出した要素をトリミングする役割で使われてるケースが多いです。

上記プロパティがあるとposition: sticky;は機能しないです。

対処方法

対処方法としては親要素のoverflow: hidden;を削除するか、overflow: hidden;を指定してある要素の外でposition: sticky;を使用するかになります。

要素を移動できない場合はJavaScriptを使う

  <main class="main">
    <!-- ここにspanタグを移動 -->
  </main>
  <!-- overflow: hidden;が効いてる要素 -->
  <div class="parent">
    <span class="txt">追従要素</span>
  </div>
  <script>
    var main = document.querySelector(".main");
    var txt = document.querySelector(".txt");
    // mainタグ内に移動
    main.appendChild(txt);
  </script>

要素を手動で移動できない場合はJavaScriptを使って移動しましょう。

上記コードはparentクラスのdivタグがoverflow: hidden;されており、mainタグ内に追従要素を移動してposition: sticky;を機能させたい場合のコード例です。

appendChildメソッドを使うと特定要素の最後に指定した要素を移動できます。

引数に移動する要素を指定すればOKです。

まとめ

position: sticky;で要素が追従しない時の原因・対処方法について紹介しました。

以上で解説を終わります。