Sticky add to cart with wrapper

gistfile1.txt

{%- if product.available -%}
<div x-data="{visible: false, sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick, ...showButton}">
<template x-teleport="body">
<div 
    @theme:scroll.document="showButton"
    x-show.opacity="visible"
    class="buy-it-now-wrapper block left-0 bottom-0 fixed z-20 w-full p-r5">
  <button
    @click="handleClick"
    class= "btn btn--primary btn--full uppercase btn--add-to-cart buy-it-now block">{{'products.product.add_to_cart' | t}}</button>
<div>
</template>
</div>
<script>
    function handleClick(e){
        const button = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] button[type="submit"].btn--add-to-cart`);
        if(button){
            const scrollToElement = button.offsetTop;
            window.scrollTo({
                top: scrollToElement,
                left: 0,
                behavior: 'smooth'
            });
        }
    }
    function showButton(e){
        const button = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] button[type="submit"].btn--add-to-cart`);
        if(button){
            const top = button.getBoundingClientRect().top + button.getBoundingClientRect().height + window.scrollY;
            this.visible = window.pageYOffset > top;
        }
    }
</script>
<style>
.buy-it-now-wrapper{
    background-color: #fff;
    border-top: 1px solid var(--border);
}
</style>
{%- endif -%}