追従サイドCTA

<div class="d01-02-02-scroll">
          <p class="d01-02-02-para">下にスクロールしてください。記事本文を読み進めると右下にミニCTAが追従して現れます。</p>
          <p class="d01-02-02-para">WordPressの投稿ページで、読了率の高い読者に登録を促す使い方に向いています。</p>
          <p class="d01-02-02-para">スクロール量に応じてCTAが出現・退避します。もう少しスクロールしてみましょう。</p>
          <p class="d01-02-02-para">ここまで読んだ読者は関心が高い層。ミニCTAで自然にアクションへ誘導します。</p>
          <p class="d01-02-02-para">本文はまだ続きます。最後まで読みやすいレイアウトを保ちます。</p>
        </div>
        <div class="d01-02-02-cta" aria-hidden="true">
          <span class="d01-02-02-cta-t">続きは会員限定</span>
          <a href="#" class="d01-02-02-cta-b" onclick="return false">登録する</a>
        </div>

.prev.d01-02-02{padding:0;align-items:stretch;justify-content:stretch}
        .d01-02-02-scroll{width:100%;height:260px;overflow-y:auto;padding:22px 22px 40px;box-sizing:border-box;background:#fff}
        .d01-02-02-para{font-size:13px;line-height:1.9;color:#334155;margin-bottom:16px}
        .d01-02-02-cta{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#111827;color:#fff;box-shadow:0 12px 26px rgba(0,0,0,.3);opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
        .d01-02-02-cta.d01-02-02-on{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
        .d01-02-02-cta-t{font-size:12px;font-weight:600}
        .d01-02-02-cta-b{padding:6px 14px;border-radius:999px;background:#22d3ee;color:#083344;font-size:12px;font-weight:700;text-decoration:none}

(function(){
        var root=document.getElementById('item-01-02-02');if(!root)return;
        var sc=root.querySelector('.d01-02-02-scroll'),cta=root.querySelector('.d01-02-02-cta');
        sc.addEventListener('scroll',function(){
          if(sc.scrollTop>60){cta.classList.add('d01-02-02-on');}else{cta.classList.remove('d01-02-02-on');}
        });
      })();