任意のコンテンツまでスクロールしたときや上部から少しスクロールしたら表示されて、閉じるボタンを押すとページを再読み込みするまで非表示になるフローティングバナー！
参考サイト様～～～😭😭
こちら組み合わせるだけだと、閉じるボタンで消してもスクロールしたら表示されてしまうので😂
＋こちら！⬇️
任意のコンテンツまでスクロールしたらバナー表示
class「bnr_show」をつけたコンテンツが表示されたらバナーをフェードイン表示させる。
HTML
<div class="bnr_show">
<!--スクロールしてこの部分がページに表示されたらバナーも表示-->
<h1>見出し見出し見出し</h1>
<p>テキストテキストテキスト<br>
テキストテキスト<br>
テキストテキストテキスト</p>
</div>
<!--フローティングバナー-->
<div class="floating-bnr bnr01">
<button class="bnr_close"><i class="fas fa-xmark"></i></button>
<a href="" target="_blank">
<img src="" alt="">
</a>
</div>CSS
/*フローティングバナー*/
.floating-bnr.bnr01 {
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.05), 0 8px 14px rgba(0, 0, 0, 0.08);
display: none;
position: fixed;
bottom: 20px;
right: 10px;
width: 320px;
max-width: 90vw;
height: auto;
z-index: 9999;
}
.floating-bnr a:hover {
opacity: 0.7;
transition: 0.2s;
}
/*閉じるボタン*/
.bnr_close {
background-color: #f8f8f8;
border: none;
border-radius: 25px;
box-shadow: 0 0 7px rgb(0, 0, 0, 0.4);
color: #777;
cursor: pointer;
font-weight: bold;
padding: 5px 8px;
position: absolute;
right: -4px;
top: -2px;
}
.fa-xmark:before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-style: normal;
}4行目display：none；でページ読み込み時にバナーがチラ見えするのを防止。
閉じるボタンの×はfontawesome想定。
JQuery
先にJQueryの読み込みを忘れずに😉
<script>
// フローティングバナー
$(function () {
var btnOffset = $('.bnr_show').offset().top;
var winH = $(window).height();
var fixedbtn = $('.floating-bnr');
fixedbtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > btnOffset - winH) {
fixedbtn.fadeIn();
} else {
fixedbtn.fadeOut();
}
});
// 閉じるボタン
$(document).ready(function () {
$('.bnr_close').click(function() {
$(window).off('scroll');
$(this).parent().hide();
});
});
});
</script>elseのfadeOutで、コンテンツがページ外になったらバナーも非表示になる。
$(window).off ⇒イベント削除scrollを指定することで、閉じたバナーがスクロールで読み込まれるのを停止できる💡
でもこれだと、ほかにscrollイベント（スクロールすると途中から出てくる固定ヘッダーとか）があるときはそれも一緒に停止してしまうので、その場合はteratailの二つ目のご回答で⬇️
<script>
// フローティングバナー
$(function () {
var btnOffset = $('.bnr_show').offset().top;
var winH = $(window).height();
var fixedbtn = $('.floating-bnr');
var closeButtonClicked = false;
fixedbtn.hide();
$(window).scroll(function () {
if (closeButtonClicked) return; //クリックされていたら以下実行しない
if ($(this).scrollTop() > btnOffset - winH) {
fixedbtn.fadeIn();
} else {
fixedbtn.fadeOut();
}
});
// 閉じるボタン
$('.bnr_close').click(function() {
$(this).parent().hide();
closeButtonClicked = true;
});
});
</script>※offset().topでコンソールエラーが出るとき
該当箇所（5、12行目）を下記に変更すると解消されるはず🤔
var btnOffset = $('.bnr_show').offset().top;
if ($(btnOffset).length) {
var btnOffsetTop = $(btnOffset).offset().top;
}
.
.
.
if ($(this).scrollTop() > btnOffsetTop - winH) {
.
.
.参考様～～～！
サイトがレスポンシブ対応でないとき
3行目を変更。これで囲むといいらしい🤗
逆にレスポンシブでこれを使うとちょっと挙動が不安になる🤔かも
$(function () {
$(window).on('load resize',function(){
.
.
.
});
}); 参考様……！！
上部から任意の範囲でスクロールしたらバナー表示
コンテンツでなく上部からのスクロール位置でバナーを表示する。JSを少し調整。
JQuery
<script>
// フローティングバナー
$(function () {
var fixedbtn = $('.floating-bnr');
var closeButtonClicked = false;
fixedbtn.hide();
$(window).scroll(function () {
if (closeButtonClicked) return;
if ($(this).scrollTop() > 100) {
fixedbtn.fadeIn();
} else {
fixedbtn.fadeOut();
}
});
// 閉じるボタン
$('.bnr_close').click(function() {
$(this).parent().hide();
closeButtonClicked = true;
});
});
</script>