概要

Produce_0.mov

設定方法

<div id="sticky-add-button-container" class="page-width"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
    // ターゲットとなるボタンの選択
    const originalAddButton = document.querySelector('button[name="add"]');
    // スティッキーボタンコンテナの選択
    const stickyAddButtonContainer = document.querySelector('#sticky-add-button-container');
    // Intersection Observerのコールバック関数
    const observeAddButton = (entries) => {
    entries.forEach(entry => {
        const targetRect = entry.target.getBoundingClientRect();
        if (!entry.isIntersecting && targetRect.top < 0) {
            const clonedButton = entry.target.cloneNode(true);
            if (clonedButton.hasAttribute('disabled')) clonedButton.removeAttribute('disabled');
            clonedButton.addEventListener('click', () => scrollToTarget(entry.target));
            stickyAddButtonContainer.appendChild(clonedButton);
            stickyAddButtonContainer.classList.add('fixed-bottom');
        } else {
            stickyAddButtonContainer.innerHTML = '';
            stickyAddButtonContainer.classList.remove('fixed-bottom');
        }
    });
    }
    // Intersection Observerの初期化とターゲット要素の監視
    const addButtonObserver = new IntersectionObserver(observeAddButton);
    addButtonObserver.observe(originalAddButton);

    // フッターの選択
    const footerElement = document.querySelector('footer');
    // フッターエレメントの監視
    const footerObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
            // フッターが完全に画面に入ったとき、スティッキーボタンを隠す
            stickyAddButtonContainer.style.display = 'none';
            } else {
            // フッターが画面から出たか、一部が画面内に入っているとき、スティッキーボタンを表示する
            stickyAddButtonContainer.style.display = '';
            }
        });
    });
    // フッターの監視を開始
    footerObserver.observe(footerElement);

    // ターゲット要素をページ中央にスクロールする関数
    const scrollToTarget = (target) => {
        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;
        const middlePosition = targetPosition - (window.innerHeight / 2);
        window.scrollTo({
            top: middlePosition,
            behavior: 'smooth'
        });
    }
});
</script>
<style>
    #sticky-add-button-container {
        position: relative;
        transition: bottom 0.3s ease-in-out;
        margin: 0 auto;
        width: 100%;
        z-index: 100;
    }
    #sticky-add-button-container.fixed-bottom {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
    }
</style>