University of Derby

Sticky Call To Action 

<div class="sticky-call-to-action-container">
    <div class="sticky-call-to-action" role="complementary">
        <a href="" class="button-outline button-large" role="button" tabindex="0" data-scroll><span class="button-overlay"><span></span></span></a> </div>
    <div class="sticky-call-to-action-fixed sticky-call-to-action-hidden" role="complementary">
        <a href="" class="button-outline button-large" role="button" tabindex="0" data-scroll><span class="button-overlay"><span></span></span></a> </div>
</div>
 
<div class="sticky-call-to-action-container">
    <div class="sticky-call-to-action" role="complementary">
        {% include '@button' with {
            label: callToAction.label,
            href: callToAction.href,
            scheme: scheme,
            size: 'large'
        } %}
    </div>
    <div class="sticky-call-to-action-fixed sticky-call-to-action-hidden" role="complementary">
        {% include '@button' with {
            label: callToAction.label,
            href: callToAction.href,
            scheme: scheme,
            size: 'large'
        } %}
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    //FYI this doesn't use stickybits as that constraints to the container an element is within
if ($('.sticky-call-to-action-container').length) {

    const breakpoint = 600; // the target width at which the sticky behaviours should apply (tablet and above)

    $(window).on('scroll', () => {
        if ($(window).width() < breakpoint) {
            return false;
        }
        var scroll = $(window).scrollTop() + 20;
        if (scroll > $('.sticky-call-to-action-container').offset().top) {
            $('.sticky-call-to-action').addClass('sticky-call-to-action-hidden');
            $('.sticky-call-to-action-fixed').removeClass('sticky-call-to-action-hidden');
        } else {
            $('.sticky-call-to-action').removeClass('sticky-call-to-action-hidden');
            $('.sticky-call-to-action-fixed').addClass('sticky-call-to-action-hidden');
        }

        var anchorLinks = $('.anchor-links');
        if (anchorLinks.length > 0) {
            if (scroll > anchorLinks.offset().top) {
                $('.sticky-call-to-action-fixed').css('marginTop', anchorLinks.height())
            } else {
                $('.sticky-call-to-action-fixed').css('marginTop', 0)
            }
        }
    })

    $(window).on('resize', () => {
        if ($(window).width() < breakpoint) {
            $('.sticky-call-to-action').removeClass('sticky-call-to-action-hidden');
            $('.sticky-call-to-action-fixed').addClass('sticky-call-to-action-hidden');
        }
    })
}
  • URL: /components/raw/sticky-call-to-action/sticky-call-to-action.js
  • Filesystem Path: components/atoms/sticky-call-to-action/sticky-call-to-action.js
  • Size: 1.5 KB
  • Content: 
    .sticky {
    &-call-to-action {
        text-align: right;
        font-size: 0; // to avoid spurious bottom padding when measuring the component

        &-container {
            position: relative;
            align-self: flex-end;

            .button {
                margin-bottom: 0;
            }
        }

        &-fixed {
            position: fixed;
            top: 20px;
            z-index: 2;
            transition: margin-top .3s $default-animation-curve;
        }

        &-hidden {
            visibility: hidden;
        }
    }
}
  • URL: /components/raw/sticky-call-to-action/sticky-call-to-action.scss
  • Filesystem Path: components/atoms/sticky-call-to-action/sticky-call-to-action.scss
  • Size: 557 Bytes

There are no notes for this item.