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