Bootstrap3 Affix 中的 data-offset-bottom答案

【问题标题】：data-offset-bottom in Bootstrap3 AffixBootstrap3 Affix 中的 data-offset-bottom
【发布时间】：2013-09-11 07:42:45
【问题描述】：

我想从我的附加元素中设置“停止”。

例如对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)

在此之后，其他行至少有 1000 像素的空间。

同样有趣的是，对于data-offset-bottom="800，当它变成 affix-bottom 时，会添加元素"top:-998.765625px"，这个属性会随着data-offset-bottom 的不同值而变化

【问题讨论】：

标签： html css twitter-bootstrap-3 affix

【解决方案1】：

另请参阅：Bootstrap 3.0 : Fixed column

.affix-bottom 是距页面底部的像素数。您附加的元素的底部将滚动到此位置。因为在 affix-bottom 处的位置设置为绝对位置，您所贴容器的顶部将是负数（此容器的高度）。

在你的 css 中，你不必设置 affix-bottom 的 top 和 bottom 或将位置设置为绝对。

【讨论】：