cssだけでスクロールに追従してくるメニューを作る
どうも柏倉です。
ついに、ゼルダの伝説 ティアーズ オブ ザ キングダムが発売しましたね。
私はまだプレイしていませんが、妻と子供が朝5時からきゃっきゃきゃっきゃ楽しそうに遊んでいます。
広い世代で一緒になって楽しめるゲームって素敵ですよねー。
ということで、今回はcssだけでスクロールに追従してくるメニューを作ってみたいと思います。
jqueryを使わなくても実装できるので、便利ですね。
超簡単position: sticky
やり方は超簡単です。
追従させたい要素にposition: sticky;を指定してtopも指定してあげればOKです。
あとはページをスクロールすれば要素がページ上部に来た時に固定されて、スクロールに追従してくれます。
<div class="wrap">
<div class="left_contents">
<div class="menu">
<h2>menu</h2>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ul>
</div>
</div>
<div class="right_contents">
<h2>タイトル</h2>
<div class="main">
メインコンテンツ
</div>
</div>
</div>
こんな感じのHTMLに
.wrap {
width: 100%;
height: 100%;
display: flex;
}
.left_contents {
width: 20%;
height: 1200px;
background-color: #D00;
}
.menu {
position: -webkit-sticky; /* 任意 */
position: sticky;
background-color: lightgreen;
top: 0;
}
.right_contents {
float: right;
width: 80%;
height: 1200px;
background-color: rgb(144, 211, 238);
}
h2 {
margin: 0;
}
こんな感じのCSSを当てれば完成です！
こちらから動いてるものを確認できます。
注意事項
position: sticky;を指定する要素の親要素にはかならず高さを指定してください。
自分が動く範囲が指定されていないとページ上部で固定されなくなります。
あと、floatになっているものも固定できません。
まとめ
いかがでしたでしょうか？
cssだけでも簡単に実装できるので、使いやすいですよね。
過去に下記のような記事も投稿していますので、よかったらご覧ください。
VScodeでメモを取るときにMarkdownって使ってますか？
dockerにamazon linux 2023を入れてnginx + php-fpm + Laravel の環境を作ってみた
最後まで見ていただいてありがとうございました。
また次の記事を投稿したときは宜しくお願いします。