スクロールで隠れる/現れるヘッダ

用途

下スクロールで隠れて、上スクロールで現れるヘッダ。スマホアプリ風。

特徴

• 下スクロール隠す
• 上スクロール現す
• 滑らかアニメ
• 閾値カスタム

コード（コピペ用）

import { useEffect, useState } from 'react';

export function useScrollDirection() {
  const [show, setShow] = useState(true);
  useEffect(() => {
    let lastY = window.scrollY;
    const onScroll = () => {
      const y = window.scrollY;
      if (Math.abs(y - lastY) < 10) return;  // 微小スクロール無視
      setShow(y < lastY || y < 100);  // 上スクロール or 上部
      lastY = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return show;
}

// 使い方:
// const show = useScrollDirection();
// <header style={{ position: 'sticky', top: 0, transform: show ? 'translateY(0)' : 'translateY(-100%)', transition: 'transform .25s' }}>...</header>

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加