途中でバナーが表示された後、スクロールアップすると非表示になります。
ではコードです。
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>
