position:stickyでスクロールした時にメニューを一定範囲に固定する

当記事のh2タグにも適用しています!!😀

position:stickyとは?

「スクロールした際に、親要素のボックス内の指定した位置に固定させることができるpositionプロパティ」です。

例えば以下のように書くと、

//HTML
<section>
  <h2>ここにposition: stickyを適用</h2>
</section>

//CSS
h2 {
  position: sticky;
  top: 0px;
}
section {
  height: 1500px;
}

sectionのボックス内で、h2タグが常にtop:0pxの位置に来るようになります。

 

要するに、コンテナとなる要素を作って、その中に固定したいメニューを作って、そのメニューに対して

  • position: sticky; top: 0px;
  • top: 0px;

この2つを指定するだけです!そして超かんたん!

サンプルページ

詳しく

用語としては以下のとおりです。

  • スティッキーアイテム:
    position: sticky;を設定した要素のこと。
  • スティッキーコンテナ:
    position: sticky;を設定した要素の親要素こと。

 

ポイントとしては

position: sticky;を設定した要素の親要素は、自動的にスティッキーコンテナになる

・スティッキーアイテムは、スティッキーコンテナから出ることができない

という2点。

 

その他補足です。

  • sectionタグのheight:1500px;は、子要素の高さ以上あれば、わざわざ指定する必要はない。
  • sectionタグの部分は、divタグなどでもOK

表のヘッダーを固定

これは結構使えそうな気がするのですが

以下のように列・行のヘッダーをそれぞれ固定することもできます。

これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
サンプルテキストこれはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。

 

 

以下、使用する上のポイントです。

tableを囲う親要素を作り、その親要素にoverflow: scrollと高さ指定(この例で言うと height: 400px)をする

table自体には、以下のようなCSSを適用する。

/* 上固定 */
tr:nth-of-type(1) > th:not(th:nth-of-type(1)) {
  position: sticky;
  top: 0px;
  background-color: purple;
  color: white;
  z-index: 1;
}

/* 左固定 */
tr:not(tr:nth-of-type(1)) > th,
tr:nth-of-type(1) > th:nth-of-type(1) {
  position: sticky;
  left: 0px;
  background-color:darkblue;
  color: white;
  z-index: 2; /*左固定が上になるようにする */
}

/* 折返ししないようにする */
table {
  white-space: nowrap;
}

 

theadタグを書けばもっと楽に書けますが、書いた後に「あ、thead使えばよかったじゃん・・・」と気づきました😭

WordPressだとhタグにつけるだけ

WordPressだとhタグに

  • position: sticky; top: 0px;
  • top: 0px;

を付けるだけでOKです!かんたん!

 

当記事でもh2タグに

h2 {
  position: sticky; 
  top: 0px;
 }

を設定してるだけです!😀

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました