[Add] Fixed CTA On Scroll 2.0

design
cta

#1

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/


:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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 :+1:

Step 2.

Add the Javascript to your page and swap in the ID of your fixed CTA

<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


The Ultimate List of Unbounce Tips, Scripts & Hacks
Side bar fixed form
#2

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?


#3

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!


#4

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


#5

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!


#6

This is great. Thanks!


#7

Great article,

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

Regards,

TechTIQ Solutions


#8

My top menu still jumps around not matter what i do :frowning: