Question

I have just used the ScrollToFixed plugin by bigspotteddog

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

on my website

( http://faiththeagency.com/easyphone/frequently-asked-questions.php ) *updated website so plugin is working

And basically from what I can see this plugin is inserting a div directly below my #float-cta div with these attributes:

<div style="width: 354px; height: 457px; float: none; display: none; "></div>

And this is cauing my layout to change and sort of jump around, can anyone see why this is happening?

Here is my code.

   <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:[e-mail]">[e-mail]</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;
}

I’ll be around all day to answer any questions, and thanks in advanced.

Answer 1

I actually contacted Bigspotteddog and he/she was very helpful with my query and supplied a fix to this problem. The fix can be seen here:

Thanks for the compliment. I found a workaround for the issue you are seeing. I don’t think this plugin works well with absolutely positioned elements as it uses absolute itself.

Here are the changes made:

1. Remove the marginTop from the scrollToFixed call:

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

2. Put a contents wrapper (#float-cta-contents) inside of your #float-cta to create the desired margin-top:

    <div id="float-cta">
      <div id="float-cta-contents">
       ...
   

3. Modify your css to this:

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