web-dev-qa-db-ja.com

Bootstrap 4、navbar fixed-topお​​よびその他のsticky-top要素

ここで再現： https://jsbin.com/lawafu/edit?html,output

これはバグですか？間違い？問題？実現不可能なアイデアですか？

スクロール前： before

スクロール後： after

必要なもの：

明らかに、ページのスクロールダウン時にサイドバーを表示する必要があります。固定トップナビゲーションバーにボディのパディングトップを使用します。

私はこのコードをサイドバーに使用しています：

<div class="sticky-top">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
htmlcsstwitter-bootstrapbootstrap-4sticky
7
user4412054

ブートストラップsticky-topは、top:0を設定するため、Navbarのオフセットがありません。 Navbarの高さを考慮してカスタムクラスを追加できます。

.sticky-offset {
    top: 56px;
}

<div class="sticky-top sticky-offset">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

デモ：https://www.codeply.com/go/QeJOvbYswd

関連：ブートストラップ4固定上部ナビゲーションおよび固定サイドバー

22
Zim

Zimの答えは役に立ちましたが、MacOS上のSafari 12.0.1では機能しませんでした（Chrome 70は正常で、期待どおりに機能しました）。

これは、sticky-topのtop：0px値が追加されたカスタムクラスよりも優先されているためだと思います。

代わりに、私は単に追加しました：

.sticky-top{
  top:56px;
}

Safariでも修正されました。さらに、カスタムクラスをdivに追加する必要はありません。

1
dcsilver