数据偏移量在Bootstrap3底部 [英] data-offset-bottom in Bootstrap3 Affix

问题描述

我想设置停止形式的贴纸元素。

示例将在 http://9gag.com/ ，它会滚动直到它的父容器。

我使用了这个词缀，我发现data-offset-bottom属性（没有多大文档记录）

 < div id =newsclass =主页 - 行列> 
< div class =col-xs-3> 
< div class =ssAffixdata-spy =affixdata-offset-top =400data-offset-bottom =800> 
 123 
< / div> 
< / div> 
< div class =col-xs-9> 
< div id =homepage-galleryclass =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）

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

---

也有趣的是，对于 data-offset-bottom =800 ，当它变成粘贴底部时，元素获得添加 top：-998.765625px，这个属性因不同的 data-offset-bottom 值而异

解决方案

另见： Bootstrap 3.0：Fixed栏

.affix-bottom 是页面底部的像素数。你粘贴的元素的底部将滚动到这个位置。原因是位置被设置为绝对在粘贴底部的顶部你的词缀ed容器将负（这个容器的高度）。

在你的css中，你不必设置 top 和底部贴上底部或将位置设置为绝对。

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.

这篇关于数据偏移量在Bootstrap3底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！