フローティングバナー（追従バナー）

指定のスクロール位置がブラウザトップに到達したらバナー（要素）を出現させる。

HTML

<div id="floatBnr-start">バナーイン位置</div>
<!-- 中略 -->
<div id="floatBnr-End">バナーアウト位置</div>

<div class="floatBnr">
  <p class="floatBnr__anime">
    <a href="リンク先">
      <img
        src="画像"
        width=""
        height=""
        decoding="async"
        loading="lazy"
      />
    </a>
  </p>
</div>

CSS

.floatBnr {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.floatBnr__anime {
  -webkit-animation: zoom 1s infinite alternate;
  animation: zoom 1s infinite alternate;
}

@-webkit-keyframes zoom {

  0% {
    -webkit-transform: scale(0.85,0.85);
    transform: scale(0.85,0.85);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

JavaScript

// ページが読み込まれたら実行
$(function () {

  // フローティングバナー
  var pagetop = $('.floatBnr');
  pagetop.hide();

  var scrollStart = $('#floatBnr-start').offset().top;
  var scrollEnd = $('#floatBnr-End').offset().top;

  var distance = 0;

  $(document).scroll(function () {

    distance = $(this).scrollTop();

    if (scrollStart <= distance && distance <= scrollEnd) {
      $('.floatBnr').fadeIn(200);
    } else {
      $('.floatBnr').fadeOut(200);
    }
  });
});