Bulmaで画面の上部ま行ったら固定されるメニューを作ろうと思って
position:sticky;を調べたので備忘録
Bulmaでposition:stickyを使う
Bulmaのflexboxを使った配置は便利です。
2カラムにしたとき、メニューなどを固定をしたいと思ったので、「position:sticky」を採用することにしました。
しかし、
Bulmaには設定しているクラスがありません。
というわけで作りましょう！
CSS
.kadlu-sticky{
position:sticky;
top:1.4rem;
}
HTML
<div class="columns">
<div class="column has-background-primary">
<p>メイン記事とか</p>
<p>スクロールで</p>
<p>画面上部まで行くと</p>
<p>くっつきます！</p>
<p>うちのテーマだと目次に</p>
<p>使用しています</p>
</div>
<div class="column has-background-info">
<div class="kadlu-sticky">メニューとか</div>
</div>
</div>
メイン記事とか
スクロールで
画面上部まで行くと
くっつきます！
うちのテーマだと目次に
使用しています
メニューとか
スクロールして確認してみてください。