jquery 引导程序,滚动到div后使其保持固定

bpzcxfmw  于 2022-11-22  发布在  jQuery
关注(0)|答案(6)|浏览(173)

我正在使用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>

我想知道是否有一种方法可以让它做我想做的事情,因为我有点卡住了?
谢谢

ckx4rj1h

ckx4rj1h1#

引导程序4.0+更新

请注意,affix已经从引导程序中删除了。从2018年开始,我还建议您避免使用jQuery,转而使用angular、react或vue,以获得更好的编码实践。
现在要从bootstrap 4.0实现这一点,需要使用sticky-top类。
样本代码:

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

它看起来像这样:

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

6ju8rftf

6ju8rftf2#

根据Bootstrap文档,您必须自己编写.affix.affix-top.affix-bottom样式。

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

要定义词缀开始的位置,可以在元素上使用data-offset-*属性:
<div data-spy="affix" data-offset-top="50">

**编辑:**我做了一个快速的JSFiddle,以便更好地说明用法。

aiazj4mn

aiazj4mn3#

使用引导程序和jQuery
第一个

c86crjj0

c86crjj05#

填充为10px的顶部粘滞div的Boostrap 5更新

例如,对于navbar

<div id="navbar-content" class="navbar sticky-top">[your content]</div>

.css中:

#navbar-content{top: 10px;}

相关问题