ScrollToFixed插件创建神秘div,破坏页面布局?

时间:2012-01-20 10:13:16

标签: jquery css-position scrolltop

我刚刚使用了bigspotteddog的ScrollToFixed插件

https://github.com/bigspotteddog/ScrollToFixed

在我的网站上

http://faiththeagency.com/easyphone/frequently-asked-questions.php)*更新网站,以便插件正常运行

基本上我可以看到这个插件是在我的#flove-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:info@cycell.com">info@cycell.com</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;
}

我会整天回答任何问题,并感谢先进。

2 个答案:

答案 0 :(得分:1)

我实际上联系过Bigspotteddog,他/她对我的查询非常有帮助并提供了解决此问题的方法。修复程序可以在这里看到:

感谢您的赞美。我找到了您正在看到的问题的解决方法。我不认为这个插件适用于绝对定位的元素,因为它使用绝对本身。

这是一个演示解决方法的小提琴:http://jsfiddle.net/duUCD/1/(这个小提琴不再有效)

以下是所做的更改:

  1. 从scrollToFixed调用中删除marginTop:

    $('#float-cta').scrollToFixed();
    
  2. 在#float-cta中放入一个内容包装器(#floo-cta-contents)来创建所需的margin-top:

    <div id="float-cta">
      <div id="float-cta-contents">
       ...
    
  3. 将您的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;
    }
    

答案 1 :(得分:1)

所以这个问题很老了,但问题仍然存在。之前提供的解决方案只是针对该特定情况的解决方法。

通用解决方案是:

  //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。