<?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 } ?>
