ScrollToFixed плагин, создающий тайный div, который разрушает макет страницы?

Question

Я только что использовал плагин ScrollToFixed от bigspotteddog

(https://github.com/bigspotteddog/ScrollToFixed)

на моем сайте

(http://faiththeagency.com/easyphone/frequently-asked-questions.php) *обновлен веб-сайт, так что плагин работает

И в основном из того, что я вижу, этот плагин вставляет div прямо под моим # float-cta 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;
}

Я буду весь день, чтобы ответить на любойвопросы, и спасибо заранее.

Answer 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.

Answer 2

Я действительно связался с Bigspotteddog, и он / она очень помогли с моим запросом и предоставили решение этой проблемы. Исправление можно увидеть здесь:

Спасибо за комплимент. Я нашел обходной путь для проблемы, которую вы видите. Я не думаю, что этот плагин хорошо работает с абсолютно позиционированными элементами, так как использует сам абсолют.

Вот скрипка, которая демонстрирует обходной путь: http://jsfiddle.net/duUCD/1/ (эта скрипка больше не работает)

Вот внесенные изменения:

1. Удалите marginTop из вызова scrollToFixed:

   $('#float-cta').scrollToFixed();
   

2. Поместите обертку содержимого (# float-cta-contents) внутри вашего # float-cta, чтобы создать желаемую 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;
   }