Written by Kasumi

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;で要素が追従しない時の原因・対処方法について紹介しました。

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

目次

関連記事

HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
5590
HTMLCSS プログラミング

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

2022.02.15
2102
HTMLCSS

APIを使わず、GoogleMapを白黒でサイトに埋め込む方法

更新日:2022.06.08
2195
HTMLCSS

【簡単】CSSで背景画像だけ回転させる方法

2022.12.02
13429