Reactでスクロール位置によって要素のスタイルを変える

以前、Webページでスクロール位置に応じて要素のスタイルを変えたいようなケースがありました。 上の例では、最初は60pxですが、現在の位置より上にスクロールされると少しずつサイズが小さくなり、ビューポート上部に達したときに20pxになるように実装されています。 これをReactで雑に実装したので備忘録として残しておきます。 1. 要素の位置を取得するカスタムフックを作る まずビューポート内の要素の位置を取得する必要があります。複数の要素に対して同じことをやりたくなったときのために、要素の位置を取得する処理はカスタムフックに切り出しておきます。 import React, { useEffect, useState, useCallback } from "react"; export function useOffsetTop(ref?: React.RefObject<HTMLEleme