途中でバナーが表示された後、スクロールアップすると非表示になります。
ではコードです。
cssコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/* バナーのスタイル */ #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時間非表示になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// フローティングバナーの表示・非表示 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コード
閉じるボタンは、画像で実装しています。
|
1 2 3 4 5 |
<!-- フローティングバナー --> <div id="floatingBanner"> <div id="closeBtn"><img src="./icon_16.png" /></div> <img src="./button.jpg" /> </div> |
