4

貼り付けた要素から「停止」を設定したい。

例はhttp://9gag.com/での投票で、親コンテナまでスクロールします。

私はこれに接辞を使用しており、「data-offset-bottom」プロパティを見つけました（これはあまり文書化されていません）

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

まず第一に、これがどのように機能するのか、data-offset-bottom価値を計算する方法がわかりません。

接辞が 1 つしかないので、コンテナーに貼り付けたい (#ニュース)

この後、他の行用に少なくとも 1000px のスペースがあります。

また興味深いことに、 for data-offset-bottom="800、接辞底になると、要素が追加され"top:-998.765625px"ます 、このプロパティは値によって異なりdata-offset-bottomます

4

1 に答える 1

8

参照: Bootstrap 3.0 : Fixed column

これ.affix-bottomは、ページの下部からのピクセル数です。貼り付けた要素の下部は、この位置までスクロールします。位置が affix-bottom で絶対に設定されているため、添付されたコンテナーの上部は負になります (このコンテナーの高さ)。

CSS では、affix-bottom を設定したり、位置を絶対に設定したりtopする必要はありません。bottom

于 2013-09-07T18:37:15.383 に答える