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不能正常工作

回答

相关问题