Bootstrap，滚动到它后保持div固定

Question

我正在使用 Bootstrap， 这里 有一个简单的页面

如果您单击绿色的“开始”按钮并向下滚动页面，则会加载更多记录。我希望右侧栏中的广告在我向下滚动页面并到达广告 div 后，例如从页面顶部“粘贴”到 10 像素。

如您所见，它仍然保留在页面的一半位置。

我将其作为 div 的 HTML：

 <div class="col-md-3">
    <div data-spy="affix">
        <script type="text/javascript">
        .. advert
        <a href="#" class="back-to-top">Back to Top</a>
    </div>
</div>

我想知道是否有办法让它做我想做的事情，因为我有点卡住了？

谢谢

原文由 4532066 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 4.0+ 更新

请注意， affix 已从引导程序中删除，如此处 所述。截至 2018 年，我还建议您避免使用 jQuery，转而使用 Angular、React 或 Vue 以获得更好的编码实践。

要从 bootstrap 4.0 开始实现这一点，您需要使用 sticky-top 类。

示例代码：

 <div class="card sticky-top">
...Something
</div>

它看起来像这样：

如果你想要一些填充和边距，你可以设置它或在它上面添加另一个具有相同类的 div，等等。要有创意 :)

原文由 Fangming 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据 Bootstrap 文档，您必须自己编写 .affix 、 .affix-top 和 .affix-bottom 样式

.affix {
    top:50px;
    position:fixed;
}

要定义词缀的开始位置，您可以在元素上使用 data-offset-* 属性：

<div data-spy="affix" data-offset-top="50">

编辑： 我做了一个快速的 JSFiddle 来更好地说明用法。

原文由 cloying 发布，翻译遵循 CC BY-SA 3.0 许可协议