🫥

JavaScript

2023/03/28に公開

■ レスポンシブ条件分岐

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

ログインするとコメントできます