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>

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

谢谢

Answer 1

Bootstrap 4.0+更新

请注意,如此处所述,affix它已从bootstrap 中删除.截至2018年,我还建议你避免jQuery并转向角度,反应或vue.为了更好的编码实践.

要从bootstrap 4.0实现这一点,您需要使用sticky-top该类.

示例代码:

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

它看起来像这样:

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

Answer 2

按照引导文档,你必须写的.affix,.affix-top和.affix-bottom样式自己.

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

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

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

编辑: 我做了一个快速JSFiddle来更好地说明用法.