背景画像

【Bulma】Bulmaで追尾するメニューを作る方法【備忘録】

2019年 8月 15日  2019年 8月 20日

【Bulma】Bulmaで追尾するメニューを作る方法【備忘録】

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>

メイン記事とか

スクロールで

画面上部まで行くと

くっつきます!

うちのテーマだと目次に

使用しています

メニューとか

スクロールして確認してみてください。