Chapter 06

Navコンポーネントの追加

こんな形のものを作っていきます
Image from Gyazo

必要な機能

  • Netflixロゴ
  • ユーザーアバター画像
  • スクロールすると背景が黒くなる
  • 背景の黒が現れた時のフェード

ロジック、DOM部分


type Props = {
  className?: string;
};

export const Nav = (props: Props) => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const handleShow = () => {
      if (window.scrollY > 100) {
        setShow(true);
      } else {
        setShow(false);
      }
    };

    window.addEventListener("scroll", handleShow);
    return () => {
      window.removeEventListener("scroll", handleShow);
    };
  }, []);
  return (
    <div className={`Nav ${show && "Nav-black"}`}>
      <img
        className="Nav-logo"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1920px-Netflix_2015_logo.svg.png"
        alt="Netflix Logo"
      />
      <img
        className="Nav-avater"
        src="https://i.pinimg.com/originals/0d/dc/ca/0ddccae723d85a703b798a5e682c23c1.png"
        alt="Avatar"
      />
    </div>
  );
};

ロジック部分とDOM部分で気になるとポイントは1つだけで、スクロール時の対応です。
useEffectでスクロールが一定値に達したら、stateを更新するようにしています。
stateに応じて、DOM部分のNav-blackが付け外しされています。

scssによるスタイリング


.Nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  padding: 20px;
  z-index: 1;
  display: flex;
  justify-content: space-between;

  /* Animations */
  transition-timing-function: ease-in;
  transition: all 0.5s;

  &-black {
    background-color: #111;
  }

  &-logo {
    position: fixed;
    left: 20px;
    width: 80px;
    object-fit: contain;
  }

  &-avater {
    position: fixed;
    right: 20px;
    width: 30px;
    object-fit: contain;
  }
}

position:fixにてNavコンポーネントの位置を固定しています。
display:flex にてロゴを横並びにして、
justify-content:spacebetween にて右端と左端に設置しています。

こんな感じでスクロールに反応すれば完成です。
Image from Gyazo