バナー（特定のセクションを超えたら表示）

スクロールが特定のセクションに到達したらバナーを表示
※SP表示あり（デフォルト）

【オプション設定】

①一定期間バナーの再表示禁止　②フッター直前にバナーの追従を停止
※各オプションはデフォルト非設定

追加可能パーツ 変更可能箇所 同一ページに
複数設置

ページ複製・
クリップボード使用可否

×
  • バナー画像※1
  • バナーのサイズ※2
  • バナーの表示位置
     
  • バナー閉じる[×]画像※3
  • バナー閉じる[×]画像のサイズ
  • バナー閉じる[×]画像の表示位置

 

  • バナーを表示するトリガーとなるセクション※3
  • SP時表示・非表示※5
  • PC時表示・非表示※6

 

JS変更箇所

  • バナーのRowクラス　
    変数名：bannerRow※①
  • グロナビのクラス　
    変数名：header※②
     
  • 閉じる[×]クリックしてから、再度表示するまでの時間
    変数名 :cookieAction、hideDuration※③
  • フッターの直前にバナーを停止 
    変数名：footerAction、footerSelectors※④
 × ◯ 
※留意事項

※1※3：バナー画像はそれぞれご用意お願いします。
※2：画像サイズはCSSで調整可能ですが、実装後はそのサイズが固定になります。
※4：該当セクションにクラス名「js-banner_trigger」を追加することでバナー表示のトリガーとするセクションの変更可能。
※5：デフォルト設定では画面幅が769px以下（SP）でも表示されますが、SPで非表示も可能。その場合、バナーを格納している行（row）にクラス名「pcOnly」を追加します。
※6：バナーを格納している行（row）にクラス名「spOnly」を追加することで、PCでバナーを非表示にします。
 

【JS】
※①※②：バナーのRowとグロナビのセクションクラスは必ず確認・入力してください。
※③：使用する場合は「cookieAction」の変数を「true」に変更します。
　　　デフォルトでは30分で設定しています。
※④：使用する場合は「footerAction」の変数を「true」に変更します。
　　　変数：footerSelectorsにフッターのクラスを入力します。
　　　フッターが１種類の場合は変数値の「.ft_hoge」はそのままにします

デモ

右下のバナーを参照ください。（「編集画面用カスタムCSS」のセクションまでスクロールで表示）
デモではオプション（一定期間バナーの再表示禁止・フッター直前に停止）を設定しています。

  • スクロールが「編集画面用カスタムCSS」のセクションに到達したらバナーを表示。。

  • デフォルト設定では、画面幅が769px以下（SP）でも表示されます。
     

  • オプション：一定期間バナーの再表示禁止
    [×]ボタンでバナー非表示→1分間表示されません。1分後から表示されます。（デフォルトは30分）

  • オプション：フッター直前に停止

     

構造図

デモのパーツの構造を説明しています。

バナー（3秒後に表示）構造図

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSをカスタムCSSに記述。
  • JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。

  • クラス名を見本とあわせる。

  1. バナー画像を格納する行（row）にクラス名「js-banner02_row banner02_row」の２つを追加。
  2. バナーのメイン画像にクラス名「banner_img」を追加。
  3. バナーを閉じるボタンの画像にクラス名「js-banner_close_img banner_close_img」を追加。
  4. バナー表示のトリガーとするセクションにクラス名「js-banner_trigger」を追加。
  5. SPで非表示にしたい場合、バナーを格納している行（row）にクラス名「pcOnly」を追加。

注意点

・オプション：フッターの直前で停止を使用する場合、フッターの種類は２種類まで対応可能です。フッターの種類が３つ以上がる場合は、ユニークでJSの変更が必要になります。必ず事前にご相談ください。
・オプションはデフォルトで非設定です。
 ・オプション：一定期間バナーの再表示禁止は複数バナーに対して一律で設定されます。バナーごとに表示期間の個別設定はできません。

JS・CSS・編集画面用CSS

  • JS
  • CSS
  • 編集画面用CSS
JSをコピーする

2024-07-17更新（v1.0.0）

<script>
'use strict';
document.addEventListener('DOMContentLoaded', () => {
/* -------------------------------
バナー（スクロール位置で表示） v1.0.0​​​​​
------------------------------- */
/*------------- 変数定義 【変更可能】 START -------------*/
const bannerRow = document.querySelector(".js-banner02_row"); /* バナーのRowクラス */
const header = document.querySelector(".navi_base_custom"); /* グロナビのクラス */
const cookieAction = false; /* 一定時間バナー非表示（ON：true） */
const hideDuration = 30 * 60 * 1000; /* バナー非表示期間（30分） */
const footerAction = false; /* フッターの手前でバナーを停止（ON：true） */
const footerSelectors = ['.ft_custom01', '.ft_hoge']; /* フッタークラス（2種類目未入力可） */
/*------------- 変数定義 【変更可能】 END -------------*/

const bannerOpenTrigger = document.querySelector(".js-banner_trigger");
const bannerCloseButton = document.querySelector(".js-banner_close_img img");
const classNameActive = "is-active";
const classNameClosed = "is-closed";

/* ---------------------------
一定期間バナーの再表示を禁止
--------------------------- */
/* クッキー設定関数 */
function setCookie(name, value, minutes) {
const date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

/* クッキー取得関数 */
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

/* ---------------------------
スクロール位置が特定のクラスを付与したセクションに来たらバナーを表示
--------------------------- */
const openBanner = () => {
if (bannerOpenTrigger) {
const triggerPosition = bannerOpenTrigger.getBoundingClientRect().top + window.scrollY;
const scrollTop = window.scrollY;
const headerHeight = header ? header.offsetHeight : 0;

if (scrollTop >= triggerPosition - headerHeight) {
if (!bannerRow.classList.contains(classNameActive) && !bannerRow.classList.contains(classNameClosed)) {
if (cookieAction) {
const lastClosedTime = getCookie('bannerLastClosedTime');
const currentTime = new Date().getTime();
if (lastClosedTime && (currentTime - lastClosedTime) < hideDuration) {
return;
}
}
bannerRow.classList.add(classNameActive);
}
}
}
};
window.addEventListener("load", openBanner);
window.addEventListener("scroll", openBanner);

let resizeTimer;
window.addEventListener("resize", () => {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(() => {
openBanner();
}, 200);
});

bannerCloseButton.addEventListener("click", () => {
if (bannerRow.classList.contains(classNameActive)) {
bannerRow.classList.remove(classNameActive);
bannerRow.classList.add(classNameClosed);
if (cookieAction) {
setCookie('bannerLastClosedTime', new Date().getTime(), hideDuration / (60 * 1000));
}
}
});

/* -------------------------------
フッター上でバナーを停止
------------------------------- */
const controlBannerNearFooter = () => {
const footers = footerSelectors.map(selector => document.querySelector(selector)).filter(Boolean);
if (footers.length === 0 || !bannerRow) {
return;
}
const initialBottom = parseInt(window.getComputedStyle(bannerRow).bottom, 10);
const checkBannerPosition = () => {
if (window.getComputedStyle(bannerRow).display === 'none') {
return;
}
const windowHeight = window.innerHeight;
const scrollY = window.scrollY || window.pageYOffset;
footers.forEach(footer => {
const footerRect = footer.getBoundingClientRect();
if (scrollY + windowHeight - initialBottom > footerRect.top + scrollY) {
const newBottom = windowHeight - footerRect.top;
bannerRow.style.bottom = `${newBottom + 10}px`;
} else {
bannerRow.style.bottom = `${initialBottom}px`;
}
});
};
window.addEventListener('scroll', checkBannerPosition);
window.addEventListener('resize', checkBannerPosition);
checkBannerPosition();
const observer = new MutationObserver(() => {
checkBannerPosition();
});
observer.observe(bannerRow, { attributes: true, attributeFilter: ['style', 'class'] });
};

if (footerAction) {
controlBannerNearFooter();
}
/* -------------------------------
バナー（スクロール位置で表示） END
------------------------------- */
});
</script>

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

CSSをコピーする

2023-07-18更新（1.0.0​​​​​）

*----- バナー（スクロール位置で表示） デモ用 START v1.0.0​​​​​-----*/
//セクション・共通フッター共に使用できるよう、rowから紐づけ
.row {
&.js-banner02_row {
display: none;//読み込み時バナー非表示
&.is-active {
display: block;//「is-active」がついたらバナー表示
}
}
&.banner02_row {
position: fixed;
z-index: 2;
bottom: 80px;
right: 20px;
max-width: 330px;
.col {
position: relative;
padding: 0;
.component {
&.image {
margin: 0;
&.banner_close_img {
width: auto;
position: absolute;
top: -35px;
right: 0;
img {
cursor: pointer;
max-width: 30px !important;
}
}
&.banner_img {
a {
img {
&:hover {
opacity: 1;
}
}
}
}
}
}
}
}
}
/*----- バナー（スクロール位置で表示） デモ用 END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

CSSをコピーする

2023-07-18更新（v1.0.0）

/*----- バナー（スクロール位置で表示） デモ用 編集画面用 START v1.0.0​​​​​-----*/
&.js-banner02_row {
display: block;
}
&.banner02_row {
position: relative;
z-index: initial;
bottom: initial;
right: initial;
max-width: initial;
.col {
.component {
&.image {
&.banner_close_img {
width: 100%;
position: relative;
top: initial;
right: initial;
img {
cursor: initial;
max-width: initial !important;
}
}
}
}
}
}
/*----- バナー（スクロール位置で表示） デモ用 編集画面用 END -----*/
JSパーツ集ロゴ

      JSが必要な実装の注意点スプレッドシート（H列）は読みましたか？

      ※必ず注意点（H列）をご確認の上閲覧ください

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.