【SWELL】プラグインなしで「追従バナー」を自作！UXに優しくサイトも重くならない実装方法

#### 【コピペ用】実装コード
```html
<!-- UX配慮型 固定バナー（ページ移動で再表示） -->
<div id="smart-fixed-banner" style="display: none; opacity: 0;">
    <button id="banner-close-btn" aria-label="閉じる">×</button>
    <a href="https://ここにリンク先のURL">
        <img src="https://ここに画像のURL" alt="キャンペーン案内">
    </a>
</div>

<style>
/* -------------------------------------------
 * バナー全体のデザイン
 * ------------------------------------------ */
#smart-fixed-banner {
    position: fixed !important;
    bottom: 20px; /* 下からの距離 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    width: 90%;
    max-width: 400px; /* 最大横幅 */
    line-height: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: auto;
}

/* 表示された時に適用されるスタイル */
#smart-fixed-banner.is-visible {
    opacity: 1 !important;
}

#smart-fixed-banner img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* 閉じるボタンのデザイン */
#banner-close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    background: #444;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000001;
}

/* スマホ用の位置調整（SWELLの固定メニューがある場合） */
@media (max-width: 959px) {
    #smart-fixed-banner {
        bottom: 75px; 
        width: 88%;
    }
}
</style>

<script>
(function() {
    window.addEventListener('DOMContentLoaded', function() {
        const banner = document.getElementById('smart-fixed-banner');
        const closeBtn = document.getElementById('banner-close-btn');
        const showThreshold = 400; // 400pxスクロールしたら表示
        let isManuallyClosed = false; 

        window.addEventListener('scroll', function() {
            if (isManuallyClosed) return;

            if (window.scrollY > showThreshold) {
                if (banner.style.display === 'none') {
                    banner.style.display = 'block';
                    setTimeout(() => banner.classList.add('is-visible'), 10);
                }
            } else {
                banner.classList.remove('is-visible');
                setTimeout(() => { 
                    if(!banner.classList.contains('is-visible')) banner.style.display = 'none'; 
                }, 400);
            }
        });

        closeBtn.addEventListener('click', function(e) {
            e.preventDefault();
            isManuallyClosed = true; 
            banner.classList.remove('is-visible');
            setTimeout(() => { banner.style.display = 'none'; }, 400);
        });
    });
})();
</script>
```