Hub Hack: Stop Side CTAs from Scrolling

Follow

Use this Custom Code snippet to stop Side CTAs from moving down as you scroll the page.


Warning

Hub Hacks are not official Uberflip features.

Hub Hacks may not work on all Hubs, or may cause unexpected behavior. If you experience issues with a Hub Hack, available support is limited to helping you disable the Hub Hack only.

Important

Hub Hacks are not compatible with Front End V2 Hubs.

If you are not sure if your Hub uses Front End V2, see this article for help.

Details

  • Type: JavaScript
  • Placement: Body Bottom
  • Notes: By default, Side CTAs will float in the same place onscreen as a page is scrolled down. This Custom Code will instead fix the Side CTA to the right side of the screen so that it only appears if you're at the very top or very bottom of the page.

 

Code

<script>
function throttle(callback, limit) { var wait = false; return function () { if (!wait) { callback.call(); wait = true; setTimeout(function () { wait = false; }, limit); } } } function addThisFixScroll() { if ($(window).width() > 1101 && $('.entry-wrapper').length) { var windowTop = $(window).scrollTop(); var addThis = $('.addthis_toolbox'); var sideCta = $('.cta-item-container .cta'); var addThisH = addThis.height() var sideCtaH = sideCta.height() var articleTop = $('article .meta-wrapper').eq(0).offset().top; var articleBottom = $('article').eq(0).offset().top + $('article').height(); var topNavBuffer = $('#header').height(); addThis.css('top', articleTop - windowTop); sideCta.css('top', articleTop - windowTop); if (windowTop + topNavBuffer > articleTop) { addThis.css('top', topNavBuffer); sideCta.css('top', topNavBuffer); } if (windowTop + topNavBuffer + Math.max(addThisH, sideCtaH) > articleBottom) { addThis.css('top', articleBottom - sideCtaH - windowTop); sideCta.css('top', articleBottom - sideCtaH - windowTop); } } } $(function () { $('.cta-item-container .cta,.addthis_toolbox').css({ transition: "all .2 ease-out" }) }) $(window).on('resize scroll scrollstart scrollstop', throttle(function (e) { addThisFixScroll(); }, 12));
</script>

 

0 out of 0 found this helpful

Comments

2 comments
  • What if I only want to apply this to the gated CTA on (item level) and not the side CTA?

    0
    Comment actions Permalink
  • Hi Debra, thanks for your question!

    Unfortunately we can't provide Custom Code help here, but please open a support ticket and our team will be happy to assist you with this!

    0
    Comment actions Permalink

Please sign in to leave a comment.