我刚刚使用了 bigspotteddog 的 ScrollToFixed 插件
(https://github.com/bigspotteddog/ScrollToFixed)
在我的网站上
( http://faiththeagency.com/easyphone/frequently-asked-questions.php ) *更新了网站,因此插件可以正常工作
基本上从我所看到的来看,这个插件是在我的 #float-cta div 正下方插入一个具有以下属性的 div:
<div style="width: 354px; height: 457px; float: none; display: none; "></div>
这导致我的布局发生变化并有点跳跃,有人能明白为什么会发生这种情况吗?
这是我的代码。
<div id="float-cta">
<img src="img/phone.gif" />
<h2>Call us on: 0800 085 2761</h2>
<p class="f13">Lines are open 9.00am – 5.00pm,<br /> Monday to Friday.</p>
<img src="img/store.gif" />
<h2>Go in store</h2>
<p class="f13">The Age UK Shop is located in Peterborough town centre: <span class="bold">25 Westgate, Peterborough, PE1 1PZ</span>. <span class="italic">Age UK Limited is acting as our<br /> in-store sales agent. All contracts are with CyCell Limited.</span></p>
<a href="easyphone_order_form.pdf" class="block nul"><img src="img/form.gif" />
<h2 class="ul">Download an order form</h2>
<p class="f13">Click here to download the order form. <br />Fill it in and post it in a stamp addressed envelope to <span class="bold">EasyPhone, PO Box 70812, London, NW1W 8ZA</span></p></a>
<img src="img/letter.gif" />
<h2>Email order form</h2>
<p class="f13">Scan and email your completed order form<br /> to <a href="mailto:[email protected]">[email protected]</a></p>
</div>
jQuery
$('#float-cta').scrollToFixed();
CSS
#float-cta {
position:absolute;
width:322px; height:395px;
background-color:#00853e;
margin: 30px 0 0 0;
color:#FFFFFF;
font-size:14px/16pt;
padding: 16px;
right:39px;
}
#float-cta.fixed {
position:fixed;
top: 0;
}
#float-cta p {
margin: 0 0 22px 52px;
}
#float-cta img {
float:left;
margin: 0 9px 0 0;
}
我会全天回答任何问题,提前致谢。
所以这个问题已经很老了,但问题仍然存在。之前提供的解决方案只是针对该特定情况的解决方法。
通用解决方案是这样的:
//Scroll to fixed sidebar
$("#fixed-sidebar-wrapp").scrollToFixed();
//Remove mystery div
$("#fixed-sidebar-wrapp").next().remove();
假设内容之后没有任何内容需要修复。
<div id="something">
...
</div>
<div id="sidebar">
<div id="fixed-sidebar-wrapp">
<div id="sidebar-content">
...
</div>
</div>
<!-- Mystery div will appear here -->
</div> <!-- end sidebar -->
<div id="more-content"> <!-- This will be unaffected by the .remove() -->
如果你的固定内容之后还有一些东西,你当然必须相应地调整jquery。
我实际上联系了 Bigspotteddog,他/她对我的查询非常有帮助,并提供了解决此问题的方法。修复可以在这里看到:
谢谢夸奖。我找到了解决您遇到的问题的方法。我认为这个插件不能很好地处理绝对定位的元素,因为它使用绝对本身。
以下是所做的更改:
从scrollToFixed调用中删除marginTop:
$('#float-cta').scrollToFixed();
将内容包装器 (#float-cta-contents) 放入 #float-cta 内以创建所需的页边距:
<div id="float-cta">
<div id="float-cta-contents">
...
将你的CSS修改为:
#float-cta {
float: right;
margin-right:39px;
font-family: AlwynNewRegular;
font-size: 24px;
}
#float-cta-contents {
width:322px;
height:395px;
margin-top: 30px;
background-color:#00853e;
color:#FFFFFF;
padding: 16px;
}