スクロールの途中で追従バナーを表示させる方法 - 神戸のホームページ制作会社ユニファース代表ブログ

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

ではコードです。

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

/* バナーのスタイル */

#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時間後までバナーを非表示
			}
		});
	}
});

// フローティングバナーの表示・非表示

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>

</div>