如何使用CSS的position: sticky属性和Bootstrap 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属性仅设置给侧边栏中的菜单时，因此相关文章部分正常滚动并使用菜单div获得粘性行为，它不起作用：

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

这是第一个示例的屏幕录像，它可以滚动整个侧边栏并具有粘性行为，然后将粘性属性更改为不起作用的菜单：

Bootstrap 4 推荐使用sticky属性，因为不再支持Affix jQuery插件：

不再支持Affix jQuery插件。我们建议使用position: sticky polyfill代替。

我已在以下浏览器中进行了测试:

• Firefox 47.0，在about:config下启用css.sticky.enabled =“true”

• Chrome 50.0.2661.94 (64位)，在chrome://flags中启用实验性Web平台特性

（这不是如何在Bootstrap中制作粘性侧边栏？的重复，因为那个使用了BS affix）

- marcanuy

---

你是否正在尝试类似于这个的东西 - https://codepen.io/nagasai/pen/NAXgXQ - Naga Sai A

@NagaSaiA 不，我想要这里描述的“粘性”效果：https://developer.mozilla.org/en/docs/Web/CSS/position 侧边栏应该从相对位置开始，然后变为固定位置，而不是字母。 - marcanuy

所以没有jQuery或JavaScript吗？ - Giri

@Giri 只使用原生浏览器的 position:sticky 支持，不使用 JavaScript。 - marcanuy

Answer 1

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

- Zim

---

侧边栏的“粘性”定位效果有效，但如果侧边栏内容高度超过了视口高度，则不能滚动查看整个侧边栏内容。在此情况下，只有当用户滚动到“内容”部分的底部时，才能将侧边栏内容滚动到可见位置。 - Robert Andrews

Answer 2

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

.col-xs-4不像.col-xs-8那样高，所以当粘性启动时，基本上没有菜单可以“浮动”在其中。使.col-xs-4更高，事情就好了：https://codepen.io/anon/pen/OXzoNJ 如果你启用我们的网格系统的Flexbox版本（通过$enable-flex：true;），您将免费获得自动等高列，这在您的情况下非常方便。

- marcanuy

Answer 3

@wrldbt的答案适用于Bootstrap 4 alpha 5及以下版本，但在alpha 6中，-xs中缀已被删除，并且网格已被重写。

我整理了一些内容，更加简洁，适用于当前版本的Bootstrap，并使用flexbox包括一个粘性底部。

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

- eklundkristoffer

Answer 4

Polyfill解释。

您需要包含JS polyfill才能使用它。Bootstrap页面上推荐的polyfill如下：

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

这里是更新的 Codepen：https://codepen.io/anon/pen/zBpNRk 我已经包含了必要的 polyfill（我使用了 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;
}

最后你把

的顺序搞混了。你需要将带有sticky类的

放在整个行的外面，所以我用另一个空的<div class="col-xs-6"></div>填满了剩余的那一行。

- wrldbt

---

我正在使用原生支持 position:sticky 的浏览器，就像问题中指定的那样。 - marcanuy