web-dev-qa-db-ja.com

Bootstrap 4でサイドバーを表示状態に保つためにCSS位置スティッキーを使用する方法

次のような2列のレイアウトがあります。

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
    </div>
 </div>

position:stickyをサイドバー列に設定すると、サイドバーのスティッキーな動作が得られます。 https://codepen.io/marcanuy/pen/YWYZEp

CSS：

.sticky {
  position: sticky;
  top: 10px;
}

HTML：

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4 sticky">
    </div>
 </div>

しかし、stickyプロパティonlyをサイドバーにあるmenに設定すると、関連の記事セクションは正常にスクロールし、menu divでsticky動作を取得しますが、動作しません：

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
       <div class="menu sticky">
       </div>
    </div>
 </div>

これは、スティッキーな動作でサイドバー全体をスクロールし、スティッキープロパティを機能しないメニューに変更する最初の例のスクリーンキャストです。

enter image description here

ブートストラップ4 推奨sticky Affix jQueryプラグインのサポートの廃止：

Affix jQueryプラグインを削除しました。代わりに、sticky polyfillという位置を使用することをお勧めします。

私はそれをテストしました：

  • css.sticky.enabled=“true”の下にabout:configを含むFirefox 47.0

  • experimental Web Platform featuresでchrome://flagsが有効になっているChrome 50.0.2661.94（64ビット）

（これは Bootstrapでスティッキーサイドバーを作成する方法？ がBS affixを使用しているため）の複製ではありません）

csstwitter-bootstrapcss-positionbootstrap-4twitter-bootstrap-4
11
marcanuy

flexboxの有効化を解決しました。 Bootstrapの Github リポジトリで問題を提起した後、Bootstrap member ：

.col-xs-4の高さは.col-xs-8ほど高くないため、基本的にベタつきが発生したときにメニューが「浮く」ためのスペースはありません。col-xs-4をより高くし、 https://codepen.io/anon/pen/OXzoNJ Flexboxグリッドシステムのバージョンを有効にする場合（$ enable-flex経由： true;）、自動的に等しい高さの列を無料で取得できます。これは、あなたの場合に便利です。

6
marcanuy

安定版Bootstrap 4.0.0リリースでは、これはsticky-topクラス...

デモ

<div class="container">
    <nav class="navbar navbar-light bg-light navbar-expand">
        <a class="navbar-brand" href="#">Header</a>
        ...
    </nav>
    <div class="row">
        <div class="col-8 content">
            Content
        </div>
        <div class="col-4">
            <div class="sticky-top">
                <h4>Sticky menu</h4>
                ...
            </div>
        </div>
    </div>
    <div class="footer">
        ...
    </div>
</div>

これは、ヘッダー/ナビゲーションバー、コンテンツ、およびフッターの高さが動的でも不明でも機能します。

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

9
Zim

@wrldbtによる答えは、bootstrap 4 alpha 5ですが、alpha 6では-xs中置詞は削除され、グリッドは書き直されました。

現在のバージョンbootstrap=で動作し、フレックスボックスを使用したスティッキーフッターも含まれています。

https://codepen.io/cornex/pen/MJOOeb

1
eklundkristoffer

ポリフィルの説明

使用するには、JSポリフィルを含める必要があります。 Bootstrapページのリンクで推奨されるポリフィルは

更新されたコードペンは次のとおりです。 https://codepen.io/anon/pen/zBpNRk

必要なポリフィルを含め（stickyfillを使用）、

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

ライブラリは、CSSにこれを使用することを提案しました

.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

そして最後にdivの順序が混同されました。 divをスティッキークラスと共に行全体の外側に配置する必要があるため、行の残りを空の別の<div class="col-xs-6"></div>で埋めました。

1
wrldbt