バナー （MVの高さを超えたら表示）
スクロールがMVの高さを超えたらバナーを表示
※SP表示あり（デフォルト）
【オプション設定】
①一定期間バナーの再表示禁止 ②フッター直前にバナーの追従を停止
※各オプションはデフォルト非設定
バナー （MVの高さを超えたら表示）
| 追加可能パーツ | 変更可能箇所 | 同一ページに 複数設置 |
ページ複製・ |
|---|---|---|---|
|
× |
JS変更箇所
|
× | ◯ |
| ※留意事項 | |||
|---|---|---|---|
|
※1※3：バナー画像はそれぞれご用意お願いします。
【JS】 |
デモ
右下のバナーを参照ください。
MVを超えた高さでバナーが表示されます。
デモではオプション（一定期間バナーの再表示禁止・フッター直前に停止）を設定しています。
- スクロールが指定したMVの高さを超えたら表示
- 画面幅が769px以下（SP）でも表示されます。
-
オプション：一定期間バナーの再表示禁止
[×]ボタンでバナー非表示→1分間表示されません。1分後から表示されます。（デフォルトは30分） -
オプション：フッター直前に停止
構造図
デモのパーツの構造を説明しています。
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSをカスタムCSSに記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- バナー画像を格納する行（row）にクラス名「banner04_row js-banner04_row」の２つを追加。
- バナーのメイン画像にクラス名「banner_img」を追加。
- バナーを閉じるボタンの画像にクラス名「js-banner_close_img banner04_close_img」を追加。
- SPで非表示にしたい場合、バナーを格納している行（row）にクラス名「pcOnly」を追加。
注意点
・MVの種類がTOP・下層MVの２種類＋１種類までの合計３種類指定可能です。MVがサイト内で4つ以上がある場合は、ユニークでJSの変更が必要になります。必ず事前にご相談ください。
・オプション：フッターの直前で停止を使用する場合、フッターの種類は２種類まで対応可能です。フッターの種類が３つ以上がる場合は、ユニークでJSの変更が必要になります。必ず事前にご相談ください。
・オプションはデフォルトで非設定です。
・オプション：一定期間バナーの再表示禁止は複数バナーに対して一律で設定されます。バナーごとに表示期間の個別設定はできません。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2024-07-17更新（v1.0.0）
<script>
'use strict';
document.addEventListener("DOMContentLoaded", () => {
/*----------------------------------------------------------------
バナー（MVの高さを超えたら表示） START v1.0.0
----------------------------------------------------------------*/
/*------------- 変数定義 【変更可能】 START -------------*/
const topMVClass = '.mv_custom'; /* MVクラス */
const subPageMVClass = '.sub-page-custom'; /* 下層MVクラス */
const sectionAboveMVClass = '.xxxxxxxxxx'; /* MV上のクラス（未入力可） */
const bannerSelector = '.js-banner04_row'; /* バナーのRowクラス */
const cookieAction = false; /* 一定時間バナー非表示（ON：true） */
const hideDuration = 30 * 60 * 1000; /* バナー非表示期間（1分） */
const footerAction = false; /* フッターの手前でバナーを停止（ON:true） */
const footerSelectors = ['.ft_custom01', '.ft_hoge']; /* フッタークラス（2種類目未入力可） */
/*------------- 変数定義 【変更可能】 END -------------*/
const banner04Row = document.querySelector(bannerSelector);
const banner04CloseButton = document.querySelector('.js-banner_close_img img');
const mainVisual = document.querySelector(topMVClass) || document.querySelector(subPageMVClass);
const mvHeight = mainVisual ? mainVisual.offsetHeight : 0;
const sectionAboveMV = document.querySelector(sectionAboveMVClass);
const sectionAboveMVHeight = sectionAboveMV ? sectionAboveMV.offsetHeight : 0;
const totalHeight = mvHeight + sectionAboveMVHeight;
/* ---------------------------
一定期間バナーの再表示を禁止
--------------------------- */
/* クッキー設定関数 */
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;
}
/* ---------------------------
MVの高さを超えたらバナーを表示
--------------------------- */
const displayBanner = () => {
if (cookieAction) {
const lastClosedTime = getCookie('bannerLastClosedTime');
const currentTime = new Date().getTime();
if (lastClosedTime && (currentTime - lastClosedTime) < hideDuration) {
return;
}
}
const scroll = window.scrollY;
if (scroll > totalHeight && !banner04Row.classList.contains('-closed')) {
banner04Row.classList.add('-visible');
} else {
banner04Row.classList.remove('-visible');
}
};
banner04CloseButton.addEventListener('click', () => {
if (banner04Row.classList.contains('-visible')) {
banner04Row.classList.remove('-visible');
banner04Row.classList.add('-closed');
if (cookieAction) {
setCookie('bannerLastClosedTime', new Date().getTime(), hideDuration / (60 * 1000));
}
}
});
/* -------------------------------
フッター上でバナーを停止
------------------------------- */
const controlBannerNearFooter = () => {
const footers = footerSelectors.map(selector => document.querySelector(selector)).filter(Boolean);
const banner = banner04Row;
if (footers.length === 0 || !banner) {
return;
}
const initialBottom = parseInt(window.getComputedStyle(banner).bottom, 10);
const checkBannerPosition = () => {
if (window.getComputedStyle(banner).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;
banner.style.bottom = `${newBottom + 10}px`;
} else {
banner.style.bottom = `${initialBottom}px`;
}
});
};
window.addEventListener('scroll', checkBannerPosition);
window.addEventListener('resize', checkBannerPosition);
checkBannerPosition();
const observer = new MutationObserver(() => {
checkBannerPosition();
});
observer.observe(banner, { attributes: true, attributeFilter: ['style', 'class'] });
};
window.addEventListener('scroll', displayBanner);
if (footerAction) {
controlBannerNearFooter();
}
/*----------------------------------------------------------------
バナー（MVの高さを超えたら表示） END
----------------------------------------------------------------*/
});
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2024-06-24更新（v1.0.0）
/*----- バナー MVの高さを超えたら表示 START v1.0.0-----*/
//セクション・共通フッター共に使用できるよう、rowから紐づけ
.row {
&.banner04_row {
display: none;
max-width: 300px;
position: fixed;
right: 20px;
bottom: 100px;
z-index: 1000;
margin: 0;
@include breakpoint-sp {
max-width: 200px;
bottom: 70px;
}
//表示
&.-visible {
display: block;
}
// 非表示
&.-closed {
display: none;
}
.col {
padding: 0;
.component {
&.image {
margin: 0;
&.banner04_close_img {
width: auto;
position: absolute;
top: -35px;
right: 0;
z-index: 2;
img {
cursor: pointer;
max-width: 30px !important;
}
}
&.banner_img {
a {
img {
&:hover {
opacity: 1;
}
}
}
}
}
}
}
}
}
/*----- バナー MVの高さを超えたら表示 END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2024-06-24更新（v1.0.0）
/*----- バナー MVの高さを超えたら表示 START v1.0.0-----*/
&.banner04_row {
display: block;
max-width: initial;
margin: 20px auto;
position: relative;
right: initial;
bottom: initial;
z-index: initial;
border: 1px solid #000;
&::before {
content: "追従バナー";
background: #000;
color: #fff;
position: absolute;
top: -24px;
right: 0;
padding: 0 5px;
}
.col {
.component {
&.image {
&.banner04_close_img {
width: 100%;
position: relative;
top: initial;
right: initial;
z-index: initial;
margin-bottom: 10px;
img {
cursor: initial;
}
}
}
}
}
}
/*----- バナー MVの高さを超えたら表示 END -----*/
© Basic Inc. All Rights Reserved.