Bottom data snapshot in Bootstrap3 Affix

Question

I want to set the “stop” shape of my attached item.

The example will vote at http://9gag.com/ , it scrolls to its parent container.

I use the affix for this, and I found the "data-offset-bottom" property (which is not documented)

<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 the value of data-offset-bottom .

I have only one affix, and I want it to insert a container into it (#news)

after that for other lines there should be at least 1000px.

---

also interesting, for data-offset-bottom="800 , when it becomes affix-bottom, the element is added "top:-998.765625px" , this property changes with different data-offset-bottom values

Answer 1

See also: Bootstrap 3.0: Fixed Column

the .affix-bottom is the number of pixels at the bottom of the page. The bottom of the element you are attaching will scroll to that position. The reason that the position is set to an absolute value in the bottom affix is ​​that the top of the attached container will be negative (the height of this container).

In your css you do not need to set the top and bottom affix-bottom or set the absolute position.