BlueBear

WEB屋の雑記ブログ

【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>

メイン記事とか

スクロールで

画面上部まで行くと

くっつきます!

うちのテーマだと目次に

使用しています

メニューとか

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

ライター情報

七堂 結衣

教師→WEBデザ→フロントエンジニア

WEBマーケやWEBマスタも兼任。SNS広告で一発当てたことも…

フロント系技術を中心としたメモ書きとWEBやアフィリエイトの情報を発信しています

更新は不定期

関連記事

【Bulma】Bulmaでカラムを逆配置にする方法【備忘録】
【Bulma】Bulmaでカラムを逆配置にする方法【備忘録】

Bulmaでカラムを逆配置にしようと思ったときに想像以上に調べることになったのでメモです。 ユーザビリティ悪くなるから、非推奨です。 ですが、左

【AMP】Font Awesomeが表示されない?【備忘録】
【AMP】Font Awesomeが表示されない?【備忘録】

AMPでFont Awesomeを使うときにハマってしまったので、メモです。 Font Awesome5のJS認証やめてくれませんかね? 結論 Font Aweso

【AMP】GoogleMapなどのiframeを埋め込む方法
【AMP】GoogleMapなどのiframeを埋め込む方法

iframeを入れる方法です。 といっても、iframeをamp-iframeに変えるだけなんですが… amp-iframeを使ってGoogle

【AMP】amp-imgをクリックを無効にする【備忘録】
【AMP】amp-imgをクリックを無効にする【備忘録】

AMPで大きなサイズの画像を使ってヘッダーなどを作っていたのですが、 クリックして、ギャラリーモードになってしまう不具合があったのでメモ書きで