data-offset-bottom in Bootstrap3 Affix

Question

I want to set "stop" form my affixed element.

Example would be voting on http://9gag.com/, it scrolls until its parent container.

I'm using affix for this and I found "data-offset-bottom" property (which is not documented much)

<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;
}

first of all, I don't know how this should work, how to calculate data-offset-bottom value.

I have only one affix and I want it to stick in it's container (#news)

after this there is at least 1000px space for other rows.

---

also interestingly, for data-offset-bottom="800, when it becomes affix-bottom, element get added "top:-998.765625px", this property varies with different data-offset-bottom values

Answer 1

See also: Bootstrap 3.0 : Fixed column

the .affix-bottom is the number of pixels from the bottom of your page. The bottom of the element you affix will scroll till this position. Cause the position is set to absolute at affix-bottom the top of your affixed container will negative (the height of this container).

In your css you don't have to set top and bottom of affix-bottom or set the position to absolute.