如何使用CSS位置粘着，以保持边栏可见与引导4

Question

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

 <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设置为位于侧栏中的菜单时，相关文章部分将正常滚动，并使用菜单项div获取粘性行为，因此无法工作：

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

这是第一个示例的屏幕，滚动具有粘性行为的整个侧栏，然后将粘性属性更改为无法工作的菜单：

​

​

引导4 建议，粘性属性，作为对词缀jQuery插件的删除支持：

删除了jQuery插件。我们建议使用一个位置:粘胶填充代替。

我在以下几个方面进行了测试：

• 火狐47.0与css.sticky.enabled=“true”在about:config下的应用
• 在experimental Web Platform features中启用chrome://flags的Chrome 50.0.2661.94 (64位)

(这不是如何在引导带中制作一个粘稠的侧边栏？的复制，因为它使用BS词缀)

Answer 1

我解决了启用flexbox的问题。在Bootstrap的Github存储库中提出一个问题之后，我得到了一个Bootstrap 成员的答案

.col-xs-4没有.col-xs-8那么高，所以当粘性开始时，菜单基本上没有“浮动”的空间。让.col-xs-4高一点，事情就好了:如果您启用了我们网格系统的Flexbox版本(通过$ enable : true;)，您可以免费获得自动等高列，这在您的情况下是有用的。

Answer 2

在稳定的引导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://codeply.com/go/QJogUAHIyg

Answer 3

多填解释。

您需要包含JS填充才能使用它。“引导”页面上的链接推荐的多填充内容包括

• https://github.com/wilddeer/stickyfill
• https://github.com/filamentgroup/fixed-sticky

下面是一个更新的代码：https://codepen.io/anon/pen/zBpNRk

我包括了所需的填充(我使用了粘胶填充)，并将其命名为

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>填充了该行的其余部分。