次のような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>
これは、スティッキーな動作でサイドバー全体をスクロールし、スティッキープロパティを機能しないメニューに変更する最初の例のスクリーンキャストです。
ブートストラップ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を使用しているため)の複製ではありません)
flexbox
の有効化を解決しました。 Bootstrapの Github リポジトリで問題を提起した後、Bootstrap member :
.col-xs-4の高さは.col-xs-8ほど高くないため、基本的にベタつきが発生したときにメニューが「浮く」ためのスペースはありません。col-xs-4をより高くし、 https://codepen.io/anon/pen/OXzoNJ Flexboxグリッドシステムのバージョンを有効にする場合($ enable-flex経由: true;)、自動的に等しい高さの列を無料で取得できます。これは、あなたの場合に便利です。
安定版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>
これは、ヘッダー/ナビゲーションバー、コンテンツ、およびフッターの高さが動的でも不明でも機能します。
@wrldbtによる答えは、bootstrap 4 alpha 5ですが、alpha 6では-xs
中置詞は削除され、グリッドは書き直されました。
現在のバージョンbootstrap=で動作し、フレックスボックスを使用したスティッキーフッターも含まれています。
使用するには、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>
で埋めました。