我想从我的附加元素中设置“停止”。
例如投票http://9gag.com/ http://9gag.com/,它滚动直到其父容器。
我为此使用了affix,我发现了“data-offset-bottom”属性(没有太多记录)
<div id="news" class="homepage-row row">
<div class="col-xs-3">
<div class="ssAffix" data-spy="affix" data-offset-top="400" data-offset-bottom="800">
123
</div>
</div>
<div class="col-xs-9">
<div id="homepage-gallery" class="product-gallery">
gallery here
</div>
</div>
</div>
body {
position:relative
}
.ssAffix {
height: 200px;
width: 200px;
}
.ssAffix.affix{
top:50px;
bottom:auto;
}
.ssAffix.affix-top{}
.ssAffix.affix-bottom{
position:absolute;
top:0;
bottom:800px;
}
首先,我不知道这应该如何工作,如何计算data-offset-bottom
value.
我只有一个词缀,我希望它能粘在容器中(#news)
此后至少有 1000 像素的空间用于其他行。
同样有趣的是,对于data-offset-bottom="800
,当它变成 affix-bottom 时,元素被添加"top:-998.765625px"
,这个属性随不同的data-offset-bottom
values
也可以看看:Bootstrap 3.0:固定列 https://stackoverflow.com/questions/18550718/bootstrap-3-0-fixed-column/18629559
the .affix-bottom
是距离页面底部的像素数。您附加的元素的底部将滚动到该位置。由于位置在 affix-bottom 设置为绝对位置,因此固定容器的顶部将为负值(该容器的高度)。
在你的CSS中你不必设置top
and bottom
的 affix-bottom 或将位置设置为绝对。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)