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

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をコピーしました