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
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.