如何在 Bootstrap 4 中使用 CSS 位置粘性保持侧边栏可见 [英] How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

问题描述

我有一个像这样的两列布局:

 
<div class="col-xs-8 内容">
<div class="col-xs-4">

如果我将 position:sticky 设置为侧边栏列，我会得到侧边栏的粘性行为:

Bootstrap 4 推荐 sticky 属性作为放弃了对 Affix jQuery 插件的支持:

<块引用>

删除了 Affix jQuery 插件.我们建议使用 position:sticky polyfill 代替.

我已经测试过:

• Firefox 47.0 with css.sticky.enabled="true" about:config

• Chrome 50.0.2661.94(64 位)，在 chrome://flags

中启用了实验性网络平台功能

(这不是 如何在 Bootstrap 中制作粘性侧边栏? 因为那个使用的是 BS 词缀)

解决方案

我解决了启用 flexbox 的问题.在 Bootstrap 的 Github 存储库中提出问题后，我得到了 Bootstrap 的答案会员:

<块引用>

.col-xs-4 没有 .col-xs-8 高，所以基本上没有当粘性开始时，菜单可以在其中浮动"的空间.使 .col-xs-4 更高并且一切正常:https://codepen.io/anon/pen/OXzoNJ 如果启用 Flexbox 版本我们的网格系统(通过 $enable-flex: true;)，你会自动免费的等高列，这在您的情况下会派上用场.

I have a two columns layout like this:

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

If I set the position:sticky to the sidebar column, I get the sticky behaviour of the sidebar: 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>

But when I set the sticky property only to the menu that is located in the sidebar, so the related articles section scrolls normally and gets the sticky behaviour with the menu div, it doesn't work:

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

This is the screencast of the first example scrolling the whole sidebar with a sticky behaviour, and then changing the sticky property to the menu that doesn't work:

Bootstrap 4 recommends the sticky property as the dropped support for the Affix jQuery plugin:

Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.

I have tested it in:

• Firefox 47.0 with css.sticky.enabled="true" under about:config

• Chrome 50.0.2661.94 (64-bit) with experimental Web Platform features enabled in chrome://flags

(This is not a duplicate of How to make a sticky sidebar in Bootstrap? because that one is using BS affix)

解决方案

I solved enabling flexbox. After raising an issue in Bootstrap's Github repository I got an answer by a Bootstrap member:

The .col-xs-4 isn't as tall as the .col-xs-8, so there's basically no space for the Menu to "float" within when the stickiness kicks in. Make the .col-xs-4 taller and things work fine: https://codepen.io/anon/pen/OXzoNJ If you enable the Flexbox version of our grid system (via $enable-flex: true;), you get automatic equal-height columns for free, which comes in handy in your case.

这篇关于如何在 Bootstrap 4 中使用 CSS 位置粘性保持侧边栏可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！