-
ページの到達割合をうまく設定できない・・
トピックス by
1792 pt
2023年9月15日 10:59
101
PV
【Widget名】
フッターをスクロールで表示（3画面切替え：見てる人数、終了時間、遷移先）※要javascript
【修正したいこと】
JavaScript Head内で
let visibleRatio = 99;
と設定しておりますが、ページ半ばでフッターが出てきてしまう状態です。
おそらくこの数値がパーセンテージとして機能していないものと思われます。
【参考画像】
https://drive.google.com/file/d/1e2d9T28cH1wVjy8ECiGY8JgLIk9Mskk7/view
-
1 コメント
-
コメントいただきありがとうございます！Widgetを確認しましたところ、ページの到達割合を計算する箇所に不備がありましたので、既存WidgetのJavaScriptを修正いたしました。
新しいJavaScriptコードに差し替えくださいませ。
新しいJavaScriptコード
<script>
var footerCountFunc = footerCountFunc || {};
(function(_) {
const target = '.js-footerItems';
_.scroll = function(el) {
let visibleRatio = 40;
el.classList.add('is-hidden');
window.addEventListener('scroll', throttle((event) => {
let pageHeight = document.documentElement.offsetHeight - window.innerHeight;
let visibleArea = pageHeight * (visibleRatio * 0.01);
var scroll_y = window.scrollY;
if (visibleArea < scroll_y) {
if (el.classList.contains('is-hidden')) {
el.classList.remove('is-hidden');
}
el.classList.add('is-visible');
} else {
el.classList.add('is-hidden');
}
}, 30));
}
_.currentTime = function(el) {
let current = new Date();
let hour = current.getHours();
let min = current.getMinutes();
let currentTime = el.querySelector('.js-currentTime');
currentTime.innerHTML = hour + '時' + min + '分';
};
_.viewerCount = function(el) {
let viewer = el.querySelector('.js-count');
let num = parseInt(viewer.innerHTML);
let rundNum;
let customerCount = parseInt(viewer.innerHTML);
randNum = (Math.random() * 8) - 3;
randNum = Math.floor(randNum);
customerCount = customerCount + randNum;
if (customerCount > 999) {
customerCount = 999;
}
if (customerCount < 3) {
customerCount = 3;
}
viewer.innerHTML = customerCount;
}
_.countdown = function(el) {
let second = 0;
second = _.getCookie();
if (isNaN(second)) {
second = 7200;
};
second--;
let countBoxes = el.querySelectorAll('.js-countBox');
let cookieBoxes = el.querySelectorAll('.js-cookieBox');
let timer = el.querySelector('.js-timer');
countBoxes.forEach(function(countBox) {
let timer = countBox.querySelector('.js-timer');
if (second > 0) {
timer.innerHTML = countdownTimer(second);
} else {
countBox.style.display = 'none';
}
})
cookieBoxes.forEach(function(cookieBox) {
if (second > 0) {
cookieBox.style.display = 'none';
}
})
document.cookie = "sec=" + second + " ;max-age=7200";
function countdownTimer(t) {
let hms = "";
let h = t / 3600 | 0;
let m = t % 3600 / 60 | 0;
let s = t % 60;
if (h != 0) {
hms = h + "時間" + padZero(m) + "分" + padZero(s) + "秒";
} else if (m != 0) {
hms = m + "分" + padZero(s) + "秒";
} else {
hms = s + "秒";
}
return hms;
function padZero(v) {
if (v < 10) {
return "0" + v;
} else {
return v;
}
}
}
}
_.getCookie = function() {
if (document.cookie != '') {
var tmp = document.cookie.split('; ');
for (var i = 0; i < tmp.length; i++) {
var data = tmp[i].split('=');
if (data[0] == 'sec') {
return Number(data[1]);
}
}
}
}
function throttle(fn, interval) {
let lastTime = Date.now() - interval;
return function() {
if ((lastTime + interval) < Date.now()) {
lastTime = Date.now();
fn();
}
}
}
_.init = function() {
Array.from(document.querySelectorAll(target), el => {
_.currentTime(el);
_.viewerCount(el);
_.countdown(el);
_.scroll(el);
setInterval(() => {
_.currentTime(el);
_.countdown(el);
}, 1000);
setInterval(() => {
_.viewerCount(el);
}, 5000);
})
};
})(footerCountFunc);
</script><!-- JavaScript headここまで -->
<!-- タグ設定のJavaScript bodyに以下をカットして貼り付けてください。
同一widgetを複数追加する場合、複数回貼付けは不要です。 -->
<script>
document.addEventListener('DOMContentLoaded', footerCountFunc.init, false);
</script><!-- JavaScript bodyここまで -->