[Add] Fixed CTA On Scroll 2.0


Userlevel 6
  • Former Unbouncer
  • 198 replies

community tips scripts banner

Exactly one year ago, we shared a workaround that will allow you to add a fixed CTA on scroll to your Unbounce landing pages. But why use a 5 step workaround when you can use a 2 step workaround?!

We’ve created a revamped version of script that will add a fixed CTA on your landing pages, but rather than ‘appear’, it will stick to the top when scrolling.

In a world of smaller and smaller attention spans maybe you want to make sure someone always has the option to convert on the page. No matter where they happen to be. Anchor links are great for this. But maybe you want to take it one step further?

Note: Always test and be very cautious when using this on mobile. In fact, don’t use it on mobile. It’s annoying and makes the page harder to navigate.

You can see this in action (built in Unbounce) here:
http://unbouncepages.com/fixed-cta-on-scroll/


🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Step 1.

Add the ID of the element you’d like to stick to the top when scrolling. The script calculates the placement automatically based on how it’s placed in the builder 👍

Step 2.

Add the Javascript to your page and swap in the ID of your fixed CTA. Make sure that your page has a jQuery library installed for this script to work.

<script>
    // Add ID of sticky CTA
    var fixedCta = $('#lp-pom-box-283');

    // DO NOT EDIT BELOW CODE  
    var ctaPos = fixedCta.offset();
    var ctaLeft = ctaPos.left;
    var ctaTop = ctaPos.top;

    var fixedOn = ctaTop;
      
    $(window).scroll(function () {
       if ($(this).scrollTop() > fixedOn) {
         fixedCta.css({
          'position' : 'fixed',
          'left': ctaLeft+'px',
          'top': (ctaTop - fixedOn)+'px'
         });
       } else if ($(this).scrollTop() < fixedOn) {
         fixedCta.css({
          'position' : 'absolute',
          'left': ctaLeft-237+'px',
          'top': (ctaTop)+'px'
         });
       }
    });
</script>  

YOU’RE DONE!!!

As always you should test this before adopting it fully. This is one you’ll want to use in moderation, if you’re not careful you could end up annoying a user. And remember best not to use this on mobile!


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


19 replies

That’s an awesome and simple workaround! One question for you though is the CTA moves horizontally on scroll such that if you try to scroll back top the top, it move and as a result, can cover some of the copy on the page. Any ideas to keep the CTA fixed horizontally no matter how you scroll?

To follow up, I’ve found the solution to remove the glitch where the CTA jumps around.

For the code where it says:

'left': ctaLeft-237+'px',

Replace it with:

'left': '809px',

As for the value 809px, you can replace it with whatever the L position of your box is.

Hope that helps!

Hi Rob, is it possible to use horizontal form and have the box (or section) span the page on the scroll? Examples below:

Landing Page CTA: https://www.dropbox.com/s/0r8d7ury8vw0mib/landing-page-view.jpg?dl=0

Landing Page CTA on Scroll: https://www.dropbox.com/s/02eiop0h7ro58cx/form-on-scroll.jpg?dl=0

Userlevel 6

Hi @kyleinthewild I totally missed this question when you posted it way back in March, sorry about that. If you’re still looking for a solution for a sticky nav style workaround this one might be better suited to your needs: [Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)

Hope that helps you out! Apologies again for the late reply!

This is great. Thanks!

Great article,

Your article is very helpful for me and thanks for sharing article.

Regards,

TechTIQ Solutions

My top menu still jumps around not matter what i do 😦

Hi Kevin, this solution is working great for mobile, but I need different settings for desktop…

Any Ideas on how i can define the L position for each version ?

Does it work for mobile?

Nice feature!
BUT
On the back scroll form jumps to the other position (to the right).
And how to add padding from top?
Thanks.

So while this is a great script for adding in sticky properties, it overlooks one HUGE aspect.

If your sticky object is large enough, it will run into the footer/any elements below it.

Can you guys please add in the variables to make this stop scrolling at 20-30px above a section that can be defined through an ID? I.e. the footer.

Here’s a gif of the issue I’m experiencing - I’m sure others have run into the same. I’ve spent a lot of time trying workarounds with no luck.

The code is not working for me, can someone help on this

Not working for me, CTA stays static on scroll.

Any update?

After hours of troubleshooting, I’ve come to realize that this script does not work.

This feature would be really helpful.

Hopefully there’s an update soon.

 <script>
    // Add ID of sticky CTA
    var fixedCta = $('#lp-pom-box-564');

    // DO NOT EDIT BELOW CODE  
    var ctaPos = fixedCta.offset();
    var ctaLeft = ctaPos.left;
    var ctaTop = ctaPos.top;

    var fixedOn = ctaTop;
      
    $(window).scroll(function () {
      console.log('scroll', $(this).scrollTop(), fixedOn, ctaLeft, ctaTop);
       if ($(this).scrollTop() > fixedOn) {
         fixedCta.css({
          'position' : 'fixed',
          'left': ctaLeft+'px',
          'top': (ctaTop - fixedOn)+'px'
         });
       } else if ($(this).scrollTop() < fixedOn) {
         fixedCta.css({
          'position' : 'fixed',
          'left': ctaLeft+'px',
          'top': (ctaTop)+'px'
         });
       }
    });
</script>  

this works better for me

This fixed the issue with the CTA jumping around for me! Thank you!

Hey everyone! I noticed there are a few people having trouble with getting this to work. I was able to get it working by installing jQuery. If you haven’t already I would recommend giving that a try! https://documentation.unbounce.com/hc/en-us/articles/360035109311-Installing-jQuery-on-Your-Landing-Page

Hi Everyone! Has anyone done a CTA On Scroll fixed to bottom vs. this one fixed to top? I was successful with this code, but would definitely prefer the form to stick to the bottom in desktop mode (not the top). Thanks!

All is perfect. BUT how do I disable the sticky form on the mobile version?

Reply