ScrollToFixedプラグインが謎のdivを作成してページレイアウトを崩壊させますか？

Question

は、私はちょうど私のウェブサイト上でbigspotteddog

（https://github.com/bigspotteddog/ScrollToFixed）

によって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: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

私は実際にBigspotteddogに連絡し、彼は私の質問に非常に役立ち、この問題の修正を提供しました。修正はここに見ることができます：

賛辞をいただきありがとうございます。あなたが見ている問題の回避策を見つけました。私はこのプラグインが、絶対的なものを使用するので、絶対配置された要素でうまく動作するとは思わない。変更が行われhttp://jsfiddle.net/duUCD/1/（このバイオリンは、もはや作品）ここで

：

1. scrollToFixed呼び出しからmarginTopを削除します。

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

   ここ
   は、回避策を示しフィドルです

2. ＃float-ctaの中にコンテンツラッパー（＃float-cta-contents）を入れて、希望のマージンを作成します。トップ：

   <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; 
   } 
   

Answer 2

をだから、この質問はかなり古いですが、問題がまだ存在します。これまでに提供されたソリューションは、その特定のケースの回避策に過ぎません。

一般的な解決策はこれです：

//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を調整する必要があります。