Scrollを使用したタイトルバーの作成

私は上に固定された髪が好きです.しかし、タイトルのためにbody出力を減らすスペースはあまり好きではありません.(開放的な教会は閉鎖されている)ので、この2つの方向を反映するために、下に転がると透明になる頭を作りました.

事前に知っておくべき知識

まず、CS-In-JSとReact Hookの概念をある程度熟知してこそ、その位置づけに従いやすくなります.私はCS-In-JSのために感情を使いました.
感情の公式ドキュメント
React Hook公式ドキュメント

スクロールの現在位置を知る方法

if (window.pageYOffset > 0) {
    // 스크롤이 아래로 내려갔을 때 
} else {
    // 스크롤이 가장 최상단에 있을 때
}

開発者モード実行console.log(window.pageYOffset)を任意のページで開き、デジタル出力が表示されます.window.pageYOffsetは現在のスクロール位置を示し、0はスクロールが最上位にあり、スクロールが下に下がるほど数が大きくなることを示します.

私はどうして転がる動作を知っていますか。

window.addEventListener('scroll', (event) => {
    console.log('Scrolling...');
});

clickやmouseoverなどのイベントを検出する場合はtarget.addEventListenerを使用します.巻物も同じです.スクロールバーが移動するたびにスクロールするコードをテストします...この出力を確認できます.

Hookを使用してスクロールを管理する

スクロールの方法とスクロールの現在の位置を知ることができました.では、これをよく利用して、スクロールが下に下がるかどうかを判断するstateを作成します.

const [isScroll, setIsScroll] = useState(false);

isScrollは仮面リールが最上位にあり、isScrollは真面リールがやや下向きである.

useEffectの使用

useEffect(() => {
    window.addEventListener('scroll', () => {
        window.pageYOffset > 0 ? 
        setIsScroll(true) : setIsScroll(false)
    });
}, [isScroll]);

この場合はisScrollを覚えてから更新する場合です.ですから、useEffect(func, [isScroll])の形にすればいいのです.

感情を使ってCSSを作成する

isScrollの値に従ってCSS値を調整し、スクロール時にアニメーションを追加できます.したがって,propsに基づいて値を調整できる感情を用いる.(もちろんstyled-componentも可能)

isScrollの不透明度の設定

const Nav = styled.nav`
  position: fixed; z-index: 1;
  top: 0; right: 0; left: 0;
  opacity: ${props => (props.isScroll ? "0.7" : "1")};
  backdrop-filter: blur(30px);
  padding: 0 20px;
  background: #1c2022;
  display: flex; align-items: center;
  height: 40px;
  transition: all 0.2s ease-in-out;
`;

不透明CSSプロパティ要素の不透明度を設定します.要素の後ろにある内容が非表示であるため、不透明度は透明度とは逆です.opacityは、不透明度を設定するCSSプロパティです.以上のようにisScrollがtrueの場合は0.7が透明になり、isScrollがfalseの場合は1が不透明になる.

すべてのコードを加算!

import React, { useEffect, useState } from "react";
import styled from "@emotion/styled";

const Nav = styled.nav`
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 1;
  opacity: ${props => (props.isScroll ? "0.7" : "1")};
  backdrop-filter: blur(30px);
  padding: 0 20px;
  background: #1c2022;
  display: flex;
  align-items: center;
  height: 40px;
  transition: all 0.2s ease-in-out;
`;

const Navbar = () => {
    const [isScroll, setIsScroll] = useState(false);
  
    useEffect(() => {
      window.addEventListener('scroll', () => {
        window.pageYOffset > 0 ? 
        setIsScroll(true) : setIsScroll(false)
      });
    }, [isScroll]);

    return (
        <div>
            <Nav isScroll={isScroll} />
        </div>
    );
};

export default Navbar;

この位置決めで説明したアニメーションをスクロールするために必要な最小コードは以下の通りです.ここにお肉を貼ると頭が大きくなりますにこにこ

リファレンス

https://github.com/jus0k/scroll-hooks

https://www.javascripttutorial.net/javascript-dom/javascript-scroll-events/

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

https://developer.mozilla.org/ko/docs/Web/CSS/opacity