スクロールの途中で追従バナーを表示させる方法

途中でバナーが表示された後、スクロールアップすると非表示になります。

デモ

ではコードです。

cssコード

/* バナーのスタイル */
#floatingBanner {
	position: fixed;
	right: 10px;
	bottom: 30px;
	width: 200px;
	padding:0px;
	visibility: hidden;
	transition: 0.5s;
	opacity: 0;
	line-height:1;
	z-index: 1000; /* z-indexを追加 */
}

#floatingBanner img{
	max-width:100%;
	width:100%;
}

/* 画面幅が768px以下の場合（タブレットやスマホ） */
@media only screen and (max-width: 768px) {
	#floatingBanner {
		width: 150px; /* バナー自体の幅も調整 */
	}
	#floatingBanner img {
		width: 100%; /* 画像の幅もバナーに合わせて変更 */
	}
}


/* 閉じるボタンのスタイル */
#closeBtn {
	position: absolute;
	cursor: pointer;
	top: -18px;
	right:-3px;
	z-index: 1010;
	border: 0;
	width:40px;
	height:40px;
}

#floatingBanner.is-active {
	opacity: 1;
	visibility: visible;
}

JavaScriptコード

閉じるボタンを押下すると、3時間非表示になります。

// フローティングバナーの表示・非表示
window.addEventListener("scroll", function() {
	var banner = document.getElementById("floatingBanner");
	var hideUntil = localStorage.getItem("hideBannerUntil");

	if (!banner) return; // バナーが存在しない場合は何もしない

	var now = new Date().getTime();
	
	// hideUntilが存在し、現在時刻がhideUntilより前ならバナーを非表示のままにする
	if (hideUntil && now <= hideUntil) {
		banner.classList.remove("is-active"); // バナーが表示されない
		return;
	} else if (hideUntil && now > hideUntil) {
		localStorage.removeItem("hideBannerUntil"); // 期限が切れている場合、ローカルストレージから削除
	}

	// スクロール位置が300pxを超えた場合はclass "is-active"を追加、300px未満の場合は削除
	var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
	if (scrollPosition > 300) {
		banner.classList.add("is-active");
	} else {
		banner.classList.remove("is-active");
	}
});

// 閉じるボタンの動作
document.addEventListener("DOMContentLoaded", function() {
	var closeBtn = document.getElementById("closeBtn");
	if (closeBtn) {
		closeBtn.addEventListener("click", function() {
			var banner = document.getElementById("floatingBanner");
			if (banner) {
				banner.classList.remove("is-active");
				var hideUntil = new Date().getTime() + 10800000; // 10800000ミリ秒 = 3時間
				localStorage.setItem("hideBannerUntil", hideUntil); // 3時間後までバナーを非表示
			}
		});
	}
});

HTMLコード

閉じるボタンは、画像で実装しています。

<!-- フローティングバナー -->
<div id="floatingBanner">
<div id="closeBtn"><img src="./icon_16.png" /></div>
<img src="./button.jpg" />
</div>