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

Question

我正在使用 Bootstrap，并且有一个简单的页面 here

如果您单击绿色的“开始”按钮并向下滚动页面，则会加载更多记录。我想要右侧栏中的广告，例如向下滚动页面并到达广告 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>

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

谢谢

Answer 1

Bootstrap 4.0+更新

请注意，affix 已从 Bootstrap 中删除 as mentioned here .从 2018 年开始，我还建议您避免使用 jQuery，转而使用 Angular、React 或 Vue 以获得更好的编码实践。

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

示例代码:

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

它看起来像这样:

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