CSSだけでサイドバーを固定する

サイドバーをCSSだけでスクロールせず、画面内に固定させる方法です。

環境

HTML5
Bootstrap4.5.3

実装方法

position: sticky を利用します。

下記はサンプルです。

<!-- HTML -->

<div class="container-fluid">
    <div class="row">

        <div id="sidebar" class="col p-0 min-vh-100">
            <div class="sidebar-item-wrapper">
                <div class="menu-button">
                    <a href="#">menu1</a>
                </div>
                <div class="menu-button">
                    <a href="#">menu2</a>
                </div>
                <div class="menu-button">
                    <a href="#">menu2</a>
                </div>
            </div>
        </div>
    </div>
</div>

/* CSS */

#sidebar {
    background: #ECEBC2;
    flex: 0 0 250px;
    -ms-flex: 0 0 250px;
}

.sidebar-item-wrapper {
    margin-bottom: 0;
    top: 0;
    position: sticky;
    z-index: 1;
}

.menu-button {
    background: #FFFFFF;
    display: block;
    font-size: 16px;
    height: 55px;
    padding:10px 20px;
    text-decoration: none;
}

注意点は下記2点です。

1. position: sticky を指定するブロックは子要素として指定すること
2. position: stickyを指定した要素にはtopプロパティを必ず指定すること

position: stickyは、stickyを指定したブロックの親要素を起点として固定されます。また、固定させるためにstickyを指定した要素に対してtopプロパティの指定が必要となります。

参考記事

https://programming-beginner-zeroichi.jp/articles/171ed-content

Tweet

Check