JavaScriptのスクロールイベント（scrollY を使った動き）

HTML

    <header class="header">
        <h1>サイトのタイトル</h1>
        <nav class="header-list">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Contuct</a></li>
            </ul>
        </nav>
    </header>

    <main style="padding: 2rem;">
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <p style="line-height: 2;">下にスクロールします。</p>
        <div style="height: 800px;"></div>
    </main>

CSS

        body {
            margin: 0;
            overflow-x: hidden;
        }

        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background: #9e9e9ed6;
            padding: 1rem 2rem;
            box-sizing: border-box;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* 非表示時：上に押し上げて隠す */
        .header.hide {
            transform: translateY(-100%);
            transition: transform 0.3s ease;
        }

        .header-list ul {
            list-style: none;
            display: flex;
            gap: 30px
        }

        .header-list ul a {
            color: #000;
            text-decoration: none;
        }

JavaScript

        const header = document.querySelector('.header');
        const main = document.querySelector('main');
        let lastScrollY = window.scrollY;

        // ヘッダーの高さを main に反映（初期設定）
        window.addEventListener('DOMContentLoaded', () => {
            const headerHeight = header.offsetHeight;
            main.style.paddingTop = `${headerHeight}px`;
        });

        window.addEventListener('scroll', () => {
            const currentScrollY = window.scrollY;

            if (currentScrollY > lastScrollY && currentScrollY > 300) {
                header.classList.add('hide');
            } else {
                header.classList.remove('hide');
            }

            lastScrollY = currentScrollY;
        });

.header 要素と <main> 要素を取得。

lastScrollY は「ひとつ前のスクロール位置」を記録しておくための変数です（初期値は現在のスクロール位置）。

window.addEventListener('DOMContentLoaded', () => {
  const headerHeight = header.offsetHeight;
  main.style.paddingTop = `${headerHeight}px`;
});

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY && currentScrollY > 300) {
    header.classList.add('hide');
  } else {
    header.classList.remove('hide');
  }

  lastScrollY = currentScrollY;
});

HTML

 <section class="fadein">下から</section>

    <hr>
    <section class="fadein-left">左から</section>
    <section class="fadein-left">左から</section>
    <hr>
    <section class="fadein-right">右から</section>
    <section class="fadein-right">右から</section>
    <hr>
    <section class="fadein-left">左から</section>
    <section class="fadein-right">右から</section>

CSS

        .fadein,
        .fadein-left,
        .fadein-right {
            opacity: 0;
            transition: all 1s ease;
        }

        /* 下から上 */
        .fadein {
            transform: translateY(100px);
        }

        .fadein.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* 左から右 */
        .fadein-left {
            transform: translateX(-200px);
        }

        .fadein-left.show {
            opacity: 1;
            transform: translateX(0);
        }

        /* 右から左 */
        .fadein-right {
            transform: translateX(200px);
        }

        .fadein-right.show {
            opacity: 1;
            transform: translateX(0);
        }


        section {
            border: 1px solid #999;
            max-width: 500px;
            height: 200px;
            background-color: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000;
            margin: 30px auto;
        }

JavaScript

• .fadein, .fadein-left, .fadein-right というクラスがついた要素をすべて対象にして、
• 画面内に入ってきたタイミングで .show クラスを追加
• その結果、CSSで指定されたアニメーション（フェードイン・スライドイン）が実行される

        const items = document.querySelectorAll('.fadein, .fadein-left, .fadein-right');

        const checkFade = () => {
            for (const item of items) {
                const rect = item.getBoundingClientRect();
                if (rect.top < window.innerHeight * 0.8) {
                    item.classList.add('show');
                }
            }
        };


        window.addEventListener('scroll', checkFade);
        window.addEventListener('DOMContentLoaded', checkFade);

const items = document.querySelectorAll('.fadein, .fadein-left, .fadein-right');

const checkFade = () => {

    for (const item of items) {

        const rect = item.getBoundingClientRect();

        if (rect.top < window.innerHeight * 0.8) {

            item.classList.add('show');

window.addEventListener('scroll', checkFade);

window.addEventListener('DOMContentLoaded', checkFade);