JS不能正常工作

我正在使用名爲Sticky Floating Box的jQuery插件有一個浮動但包含在另一個div內的div。它似乎工作，但它不會停留在包含div。我查看了腳本demo page，但無法弄清楚我做錯了什麼。JS不能正常工作

這裏是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; 
}

來源

2013-04-12 L84

請在問題的所有相關的代碼。如果有「太多的代碼」這樣做，修剪它，直到你有最小的例子，仍然再現你的問題。如果由於某種原因你不能這樣做，你的問題不適合Stack Overflow。 – meagar

@meagar - 我已經包含完整的代碼，但不知道是否需要。大多數CSS不是必需的，但用於演示目的。 HTML是一樣的。 – L84

問題在於'position：fixed'正被應用到'.addthis_floating_style'的某處。 –

我必須做三件事情來獲得的jsfiddle正常工作：

stickyfloat功能需要被調用後，頁面已準備就緒（並刪除'update'部分）。

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

添加下面的CSS規則：

.addthis_floating_style 
{ 
    position:inherit !important; 
}

給這個.addthis div的一個明確的高度和寬度：

.addthis 
{ 
    position:absolute; 
    top:0; 
    left:-50px; 
    width :36px; 
    height:222px; 
}

來源

2013-04-12 03:50:35

糟糕！我在小提琴中忘記了準備好的文檔。在頁面上有，但其餘的我沒有，它的工作原理！謝謝！ => – L84

注意：在社交圖標加載後，可維護性可能會更好（如果您添加或刪除社交圖標或更改樣式），將.addthis div的高度和寬度設置爲其子div的高度和寬度。 –

JS不能正常工作

回答

相關問題