display something when scroll and hide when others appear

index.md

<div id="side-cart-js">
  <template>
    <transition name="fade">
      <div @click="submitCart" class="btn-float-cart" v-show="isVisible">
        <img src="{{ 'cart-icon.svg' | asset_url }}" />
      </div>
    </transition>
  </template>
</div>

.fade-enter-active,
.fade-leave-active {
  transition: all 0.6s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  right: -70px;
}

  new Vue({
    el: '#side-cart-js',
    name: 'SideCart',
    data() {
      return {
        isVisible: false
      }
    },
    mounted() {
      window.addEventListener('scroll', this.checkDisplay, { passive: true })
    },
    methods: {
      checkDisplay(e) {
        let observer = new IntersectionObserver((entries) => {
          this.isVisible = scrollY < 500 || entries[0].isIntersecting ? false : true
        })
        observer.observe(document.querySelector('.product__cart__btn'))
      },
      submitCart() {
        document.querySelector('.shopify-product-form').submit()
      }
    }
  })