0

Sticky Floating Boxと呼ばれる jQuery プラグインを使用して、フロートするが他の div 内に含まれる div を作成しています。動作しているように見えますが、含まれている div 内にとどまりません。スクリプトのデモ ページを確認しましたが、何が間違っているのかわかりません。

JS 初期化コードは次のとおりです。

$(function() {
   jQuery('.addthis').stickyfloat('update',{ duration:0});
});

これは、問題を示すjsFiddleです。

HTML と CSS 以下:

<div class="header"> HEADER </div>
 <div class="container"> 
  <div class="addthis">
    <!-- AddThis Button BEGIN -->
      <div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
            <a class="addthis_button_facebook"></a>
            <a class="addthis_button_twitter"></a>
            <a class="addthis_button_google_plusone_share"></a>
            <a class="addthis_button_pinterest_share"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_button_email"></a>
      </div>
      <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=undefined"></script>
      <!-- AddThis Button END -->
  </div>
  <p>ICONS SHOULD STAY <BR> WITHIN THIS GRAY BOX<p>
</div>
<div class="footer"> SHOULD NOT GO BELOW THIS LINE</div> 

.header{
width:400px;
background: #F00;
height:100px;
margin:0 auto;
}
.container{
position:relative;
height:400px;
width:400px;
margin:0 auto;
background: #999;
}
.footer{
height:700px;
width:400px;
background: #F0F;
margin:0 auto;
}
.addthis{
position:absolute;
top:0;
left:-50px;
}
4

1 に答える 1

2

jsFiddle を正しく動作させるには、次の 3 つのことを行う必要がありました。

stickyfloat関数は、ページの準備ができた (そしてパーツを削除した) 後に呼び出す必要があります'update'。

jQuery(document).ready(function() {
    jQuery('.addthis').stickyfloat({ duration:0});
});

次の css ルールを追加します。

.addthis_floating_style
{
    position:inherit !important;
}

div.addthisに明示的な高さと幅を指定します。

.addthis
{
    position:absolute;
    top:0;
    left:-50px;
    width :36px;
    height:222px;
}
于 2013-04-12T03:50:35.803 に答える