Sticky Cta 

<div id="stickycta" class="sticky-cta">
    <div class="sticky-cta__inner">
        <div class="sticky-cta__link">
            <a href="#1" class="cta cta--primary" target="_blank">
              <span class="cta__label">
                  Find out how we solve problems
                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <g fill-rule="evenodd">
                      <path d="M9.238 0v8.527L7.04 7.856 5.913 9.363l3.497 5.31h1.669l3.497-5.31-1.128-1.507-2.21.676V0z"/>
                      <path d="M18 11.094v7H2v-7H0v8l1 1h18l1-1v-8z"/>
                      </g>
                  </svg>
              </span>
          </a>
        </div>
    </div>
</div>
  • Content: 
    /* @sticky-cta*/
.sticky-cta {
  width: 100%;
  min-height: 50px;
  position: fixed;
  max-height: fit-content;
  transition: all 0.5s ease-in-out;
  z-index: 20;
  
  .cta {
    width: 100%;
  }

  @media (max-width: 767px) {
    .cta {
      .cta__label {
        svg {
          right: 0;
          position: absolute;
        }
      }
    }
  }

  @media (min-width: $medium-screen) {
    top: 50%;
    transform: translateY(-50%);
    right: -200px;
    width: 160px;
    border-radius: 5px 0px 0px 5px;
  }

  p {
    font-size: 14px;
    color: $white;
  }

  &__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  &__link {
    border-top-left-radius: $border-radius-square;
    border-bottom-left-radius: $border-radius-square;
  }

  &.show {
    opacity: 1;
    right: 0;
  }


  &.hide {
    opacity: 0;
  } 
}
  • URL: /components/raw/sticky-cta/_sticky-cta.scss
  • Filesystem Path: src/components/_support-blocks/sticky-cta/_sticky-cta.scss
  • Size: 900 Bytes
  • Content: 
    import $ from 'jQuery'
$(document).ready(function () {
  var didScroll = false
  var didResize = false
  var ctaHeight
  var mastheadHeight
  var y
  var width

  function resizeToggle () {
    width = $(window).outerWidth()
    ctaHeight = $('.sticky-cta__link a').outerHeight()
    mastheadHeight = $('#masthead').outerHeight()

    if (width >= 768) {
      $('#stickycta').css({'min-height': ctaHeight, 'top': ''})
    } else {
      $('#stickycta').css({'top': mastheadHeight, 'min-height': ''})
    }
  }

  function scrollInOut () {
    
      if (width >= 768) {
        if (y >= 800) {
          $('.sticky-cta').addClass('show')
          $('.sticky-cta').removeClass('hide')
        } else {
          if (y < 500) {
            $('.sticky-cta').addClass('hide') 
            $('.sticky-cta').removeClass('show')
          }
        }
      } else {
        if (y <= 400) {
          $('.sticky-cta').addClass('show')
          $('.sticky-cta').removeClass('hide')
        } else {
          $('.sticky-cta').addClass('hide')
          $('.sticky-cta').removeClass('show')
        }
      }
  }

  resizeToggle()

  $(window).resize(function () {
    didResize = true
  })

  $(window).scroll(function () {
    didScroll = true
    y = $(this).scrollTop()
  })

  setInterval(function () {
    if (didScroll) {
      didScroll = false
      scrollInOut()
    }
  }, 200)

  setInterval(function () {
    if (didResize) {
      didResize = false
      resizeToggle()
    }
  }, 200)
})
  • URL: /components/raw/sticky-cta/sticky-cta.js
  • Filesystem Path: src/components/_support-blocks/sticky-cta/sticky-cta.js
  • Size: 1.5 KB