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;

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

サンプルページ

詳しく

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

 

ポイントとしては

・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;
 }

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

 

おわり