🫥
JavaScript
■ レスポンシブ条件分岐
var windowWidth = $(window).width();
var windowSm = 768;
if (windowWidth <= windowSm) {
//横幅768px以下(スマホ)に適用させるJavaScriptを記述
} else {
//横幅768px以上(PC、タブレット)に適用させるJavaScriptを記述
}
■ スクロールの上下で表示非表示
↓↓ js ↓↓
const fixedElm = document.getElementById("fixed_btn");
let scrollPoint = 0;
let lastPoint = 0;
window.addEventListener("scroll", function () {
scrollPoint = window.scrollY;
if (scrollPoint > lastPoint) {
// 上スクロールの場合
fixedElm.classList.add("bottom_scroll");
} else {
// 下スクロールの場合
fixedElm.classList.remove("bottom_scroll");
}
lastPoint = scrollPoint;
});
↓↓ css ↓↓
#fixed_btn {
transition: all 0.3s ease-out;
}
#fixed_btn.bottom_scroll {
opacity: 0;
transform: translateY(100%);
}
■ Cookieバナーの作り方(同意ボタンのみ)
↓↓ html ↓↓
<section class="cookie_banner" id="cookie-banner">
<div class="container flex_between align_ctr">
<p class="main_txt f12 NotoSans fw_r ln_h15">
本ウェブサイトでは、クッキーポリシーに基づきデータを利用しています。<br class="off480"/>
<a href="<?php echo home_url(); ?>/privacy#cookie" class="txt_link opa" target="_blank">クッキーポリシーについて</a>同意をお願いいたします。
</p>
<button class="cookie_btn f12 NotoSans c_white fw_b ln_h125 bg_blue" id="cookie-consent">
同意する
</button>
</div>
</section>
↓↓ js ↓↓
document.addEventListener("DOMContentLoaded", function() {
const cookieBanner = document.getElementById("cookie-banner");
const cookieConsent = document.getElementById("cookie-consent");
// ページが読み込まれた際の処理
if (getCookie("cookieConsent") !== "true") {
cookieBanner.style.display = "block"; // クッキー同意バナーを表示
}
// ボタンがクリックされたときの処理
cookieConsent.addEventListener("click", function() {
setCookie("cookieConsent", "true", 365); // クッキーを設定
cookieBanner.style.display = "none"; // バナーを非表示にする
});
// クッキーを取得する関数
function getCookie(name) {
const value = "; " + document.cookie;
const parts = value.split("; " + name + "=");
if (parts.length === 2) {
return parts.pop().split(";").shift();
}
}
// クッキーを設定する関数
function setCookie(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
}
});
Discussion