PCでの複数の広告をちょい追従させる(※複数の広告は余白分だけ広告を追従させることによりユーザーに見てもらいやすくなる)

# コード
```javascript
<?php if (!is_mobile()){ ?>
    <style>
    /* --- 親コンテナ（広告 + 高さ300pxのダミー）のスタイル --- */
    .ad-sticky-container {
        position: relative; /* 子要素の absolute 位置を基準にするため */
        margin: 0;
        padding: 0;
    }

    /* --- 実際の広告部分のスタイル --- */
    .ad-sticky-container .pachimo_koukoku_wrapper {
        position: -webkit-sticky;
        position: sticky;
        top: 0;              /* 上端からの距離 */
        z-index: 1000;       /* 他の要素より上に表示 */
        width: 100%;         /* コンテナ幅に広げる */
        box-sizing: border-box;
    }
    </style>

    <script>
        $(function(){
            // ----------------------------
            // ① ラップ処理：広告とその直下の高さ300pxのダミーを1つのブロックにする
            // ----------------------------
            $("セレクタ名").each(function(){
                var $ad = $(this);

                // 広告直後にある、高さ300pxのdiv要素を探す
                var $dummy = $ad.next("div[style*='height: 300px']");
                if (!$dummy.length) return; // 見つからなければスキップ

                // 広告とダミーdivをまとめて一つの .ad-sticky-container に包む
                $ad.add($dummy).wrapAll('<div class="ad-sticky-container"></div>');
            });
            // ----------------------------
            // ② JavaScriptによるstickyのフォールバック処理
            // ----------------------------
            $(window).on("load", function(){
                $("セレクタ名").each(function(){
                    var $adWrapper = $(this); // 実際の広告部分
                    var $container = $adWrapper.closest(".ad-sticky-container"); // 親コンテナ
                    var $dummy     = $adWrapper.next("div[style*='height: 300px']"); // 高さ300pxのdiv
                    if (!$dummy.length) return;

                    var adHeight = $adWrapper.outerHeight(true); // 広告の高さ（margin含む）
                    var adWidth  = $adWrapper.outerWidth();      // 広告の幅

                    // ★ 広告が position:fixed になると空間が崩れるのを防ぐためのダミー要素
                    var $placeholder = $("<div></div>").css({
                        height: adHeight + "px",  // 同じ高さにしておく
                        display: "none"           // 最初は非表示
                    });
                    $adWrapper.before($placeholder); // 広告の前に挿入

                    // --- スクロール時に呼び出される処理 ---
                    function onScroll(){
                        var scrollTop = $(window).scrollTop();        // 現在のスクロール量
                        var startY    = $container.offset().top;      // 固定開始位置
                        var endY      = $dummy.offset().top + $dummy.outerHeight(); // 追従終了位置（ダミーの底）
                        var maxScroll = endY - adHeight;              // 広告が底につく最大スクロール位置
                        var leftPos   = $container.offset().left;     // 左位置（ずれ防止）

                        if (scrollTop < startY) {
                            // スクロール前：広告は元の位置
                            $adWrapper.css({ 
                                position: "static", 
                                width: "auto", 
                                left: "auto", 
                                top: "auto" 
                            });
                            $placeholder.hide(); // プレースホルダー非表示

                        } else if (scrollTop <= maxScroll) {
                            // スクロール途中：広告が追従（固定）
                            $adWrapper.css({
                                position: "fixed",
                                top:      0,
                                left:     leftPos + "px",
                                width:    adWidth + "px",
                                zIndex:   1000
                            });
                            $placeholder.show(); // プレースホルダー表示（高さ維持）

                        } else {
                            // 終点到達後：広告を container 内の bottom に固定
                            var absoluteTop = maxScroll - startY;
                            $adWrapper.css({
                                position: "absolute",
                                top:      absoluteTop + "px",
                                left:     0,
                                width:    adWidth + "px"
                            });
                            $placeholder.show(); // 高さ維持
                        }
                    }
                    // スクロールイベントに処理を登録
                    $(window).on("scroll", onScroll);
                    onScroll(); // 初回呼び出しで状態を反映
                });
            });
        });
    </script>
<?php } ?>

```

# 結果
```javascript
1・.wrapAll(...)	
広告とその直下の要素（高さ300px）をまとめて親要素でラップ

2・position: sticky	
CSSでの基本的な追従動作（非対応ブラウザ向けにJSで補完）

3・placeholder	
fixedによって広告が浮いたときにレイアウトが崩れないよう、高さを埋めるダミー

4・scrollTopの条件分岐	
上端より上 → 通常位置、範囲内 → 固定、範囲超え → container内に止まるよう絶対配置

```