Side Popup that hides on scroll as you past down the #section-1 or whatever offset element you set.

side-popup.html

<div class="side-popup">
  <div class="side-popup__inner aos-init aos-animate" data-aos="fade-left" data-aos-easing="ease-out" data-aos-duration="1000" data-aos-delay="500">
    <h4>Some Heading Goes Here</h4>
    <a href="#" class="side-popup__cta button button--primary" target="">CTA Button Text</a>
  </div>
</div>

side-popup.js

/**
 * Side Popup
 */
jQuery(document).ready(function($) {

  const $win = $(window),
        $body = $('body'),
        $sidePopup = $('.side-popup'),
        $section1 = $('#section-1');

  if ( $sidePopup.length > 0) {
    $win.on('scroll', debounce(() => {
      hideFloatingLabelOnScroll( 767 );
    }, 100));
  }

  /**
   * Hide Floating Label on Scroll
   */
  function hideFloatingLabelOnScroll( maxWidth = null ) {
    const offset = $section1.offset().top + $section1.outerHeight();

    if ( $win.scrollTop() >= offset ) {
      $sidePopup.addClass('is-hidden');
    } else {
      $sidePopup.removeClass('is-hidden');
    }
  }
});

// DON'T COPY THIS IF YOU ARE ALREDYING INCLUDING DEBOUNCE.JS IN YOUR SCRIPT
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce( func, wait, immediate ) {
  var timeout;
  return function () {
    var context = this,
      args = arguments;
    var later = function () {
      timeout = null;
      if ( !immediate ) func.apply( context, args );
    };
    var callNow = immediate && !timeout;
    clearTimeout( timeout );
    timeout = setTimeout( later, wait );
    if ( callNow ) func.apply( context, args );
  };
};

side-popup.scss

// ====================================
// assets/scss/components/_side-popup.scss
// ====================================

.side-popup {
  // 73px is the actual top position. 60px is the book now bar's height.
  @include position( 'fixed', $top: 147px, $right: 0, $index: 1001 );
  width: 272px;
  @include padding( 42px 47px 36px );
  text-align: left;
  background: #fff;
  @include transition( $transition-base );

  &.is-hidden {
    right: -272px;
  }

  // This is for WordPress admin bar.
  .admin-bar & {
    top: 147px + 32px;
  }

  h4 {
    @include font-size( 30px );
    letter-spacing: ps-letter-spacing( 170 );
    margin: 0 0 8px;

    a {
      color: inherit;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  // El: cta
  &__cta {
    @include padding( 5px 16px 3px );
    @include font-size( 13px );
    vertical-align: top;
  }
}