Bootstrap3 Affix中的data-offset-bottom

Question

我想设置"停止"形式我的附加元素.

示例将在http://9gag.com/上投票,它会滚动到其父容器.

我正在使用词缀,我找到了"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价值.

我只有一个词缀,我希望它能粘在它的容器中(#news)

在此之后,其他行至少有1000px的空间.

---

同样有趣的是,因为data-offset-bottom="800当它变成词缀底部时,元素被添加"top:-998.765625px",这个属性随着不同的data-offset-bottom值而变化

Answer 1

另请参见:Bootstrap 3.0:固定列

这.affix-bottom是页面底部的像素数.您粘贴的元素的底部将滚动到此位置.因为位置设置为绝对位于底部,粘贴容器的顶部将为负(此容器的高度).

在你的CSS中你不必设置top和bottom粘贴底部或将位置设置为绝对.