[英]JS Not Functioning as Intended
I am using a jQuery plugin called Sticky Floating Box to have a div that floats but is contained within the other div. 我正在使用一个名为Sticky Floating Box的jQuery插件,它有一个浮动的div,但是包含在另一个div中。 It appears to work however it doesn't stay within the containing div.
它似乎工作,但它不会留在包含div。 I have looked over the scripts demo page but cannot figure out what I am doing wrong.
我查看了脚本演示页面,但无法弄清楚我做错了什么。
Here is the JS Initialize Code: 这是JS初始化代码:
$(function() {
jQuery('.addthis').stickyfloat('update',{ duration:0});
});
Here is a jsFiddle showing the issue. 这是一个显示问题的jsFiddle 。
HTML and CSS Below: 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;
}
I had to do three things to get the jsFiddle to work properly: 我必须做三件事让jsFiddle正常工作:
stickyfloat
function needs to be called after the page is ready (and remove the 'update'
part). 在页面准备好之后需要调用
stickyfloat
函数(并删除'update'
部分)。
jQuery(document).ready(function() {
jQuery('.addthis').stickyfloat({ duration:0});
});
Add the following css rule: 添加以下css规则:
.addthis_floating_style
{
position:inherit !important;
}
Give the .addthis
div an explicit height and width: 给
.addthis
div一个明确的高度和宽度:
.addthis
{
position:absolute;
top:0;
left:-50px;
width :36px;
height:222px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.