web-dev-qa-db-ja.com

Bootstrap 4固定上部ナビゲーションと固定サイドバー

これは、サイドバーを使用してnavbarを作成する方法の優れた例です。メインページのコンテンツのみをスクロールして、トップnavがトップフィックスされ、サイドバーが固定/静的になるように、誰でもコードを変更できますか？ class="fixed-top"をnavに割り当てることにより、navをnavの最上位に固定することができますが、サイドバーを固定する方法がわかりません。メインページのコンテンツで上にスクロールします。 class="sticky-top"をサイドバーに適用しても機能しないようです。

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
        <ul class="list-group sticky-top">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>

https://www.codeply.com/go/LFd2SEMECH

twitter-bootstrapbootstrap-4navbarsidebarsticky
8
user3691644

sticky-topは動作していますが、2つの理由で動作していないようです...

  1. メインコンテンツ領域にスクロールするのに十分なコンテンツがありません
  2. top:0に配置されているため、固定navbarの後ろに隠れます

CSSを追加して、サイドバーの上部をオフセットします（固定navbarの高さと同じです）。

.sticky-offset {
    top: 56px;
}

<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>

そして、メインエリアに十分なコンテンツ（または高さ）を追加して、スクロールが必要になるようにします...

作業デモ：https://www.codeply.com/go/7XYosZ7VH5

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
        <ul class="list-group sticky-top sticky-offset">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>
12
Zim

stickyと呼ばれる比較的新しいCSS位置プロパティがあります。

position: sticky;
top: 4em;

これがどのように機能するか、親要素の最後までスクロールするとどうなるかを確認してください。高さをautoのままにします。リファレンス- https://developer.mozilla.org/en-US/docs/Web/CSS/position

0
mate.gwozdz