レスポンシブのフローティングバナー(追従バナー)の作り方【コピペOK】

<a href="リンク先ページのURL">
  <picture class="floating-banner">
    <source srcset="PC用のフローティングバナーのURL" media="(min-width: 990px)"/>
    <img class="floating-banner__image" src="スマホ用のフローティングバナーのURL" alt="画像の説明">
  </picture>
</a>

.floating-banner {
  position: fixed; /* バナーを追従させる */
  z-index: 99999; /* 他の要素の下に隠れないように */
  bottom: 0; /* バナーの上下の位置 */
  right: 0; /* バナーの左右の位置 */
  width: 300px; /* バナーの横幅 */
}
.floating-banner__image {
  max-width: 100%; /* 画像の最大幅 */
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
  .floating-banner {
    display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
  }
}
@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
  .floating-banner {
    display: block;/* 消していたバナーを表示させる */
    width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
  }
}

$(window).scroll(function() {
  const documentHeight = $(document).height();
  const windowHeight = $(window).height();
  const fadeOutPoint = documentHeight - windowHeight - 50; // 50は最下部からの距離
  const scrollAmount = $(window).scrollTop();
  if (scrollAmount >= fadeOutPoint) {
    $('.floating-banner').fadeOut(300); // フェードアウトの速度
  } else {
    $('.floating-banner').fadeIn(300); // フェードインの速度
  }
});

<a href="リンク先ページのURL">
  <div class="floating-banner">
    <div class="banner">
      <p class="copy">コンバージョン率を<br class="sp">改善するには？</p>
      <p class="cta">詳しく見る</p>
    </div>
  </div>
</a>

.floating-banner {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    right: 0;
}
.banner {
    width: 300px;/* バナーの横幅 */
    padding: 40px 10px;
    background: linear-gradient(86.13deg, #7080F7 -3.42%, #3E9ED9 59.59%);/* バナーの背景色 */
    color: #fff;/* バナー内の文字色 */
    font-weight: bold;
    text-align: center;
}
.floating-banner a {
    text-decoration: none;/* リンクに下線が入らないように */
}
.copy {
    font-size: 28px;
    margin: 0 auto 20px;
    line-height: 1.6;
}
.cta {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    background: linear-gradient(270deg, #F4A240 0%, #E3A608 100%); /* ボタンの背景 */
    box-shadow: 0px 0px 30px #2984BA; /* ボタンの影 */
    border-radius: 25px;
    margin: 0
}
@media screen and (max-width: 990px) {
    .floating-banner {
        display: none;
    }
}
@media screen and (max-width: 560px) {
    .floating-banner {
        display: inline-block;
    }
    .banner {
        width: 100vw;
        padding: 8px;
    }
    .sp {
        display: none;
    }
    .copy {
        font-size: 18px;
        margin: 0 auto 6px;
    }
    .cta {
        height: 28px;
        line-height: 28px;
        font-size: 15px;
    }
}