我正在使用Bootstrap,并有一个简单的页面here
如果您点击绿色的“Go”按钮并向下滚动页面,则会加载更多记录。我希望右侧列中的广告在我向下滚动页面并到达广告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>
我想知道是否有一种方法可以让它做我想做的事情,因为我有点卡住了?
谢谢
6条答案
按热度按时间ckx4rj1h1#
引导程序4.0+更新
请注意,
affix
已经从引导程序中删除了。从2018年开始,我还建议您避免使用jQuery,转而使用angular、react或vue,以获得更好的编码实践。现在要从bootstrap 4.0实现这一点,需要使用
sticky-top
类。样本代码:
它看起来像这样:
如果你想要一些填充和边距,你可以设置它,或者在它上面添加另一个具有相同类的div,等等。要有创意:)
6ju8rftf2#
根据Bootstrap文档,您必须自己编写
.affix
、.affix-top
和.affix-bottom
样式。要定义词缀开始的位置,可以在元素上使用
data-offset-*
属性:<div data-spy="affix" data-offset-top="50">
**编辑:**我做了一个快速的JSFiddle,以便更好地说明用法。
aiazj4mn3#
使用引导程序和jQuery
第一个
pkwftd7m4#
第一个
c86crjj05#
填充为10px的顶部粘滞div的Boostrap 5更新
例如,对于
navbar
:在
.css
中:drkbr07n6#
第一个