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.


 

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

0 comments

Please sign in to leave a comment.