React でスティッキーフッターを作成する

最新のアプリケーションを開発するとき、私たちはしばしばユーザーの注意を何か重要なことに宣言したり、そらしたりする必要があります。

スティッキーフッターを作成することで実現できます。名前が示すように、スティッキーフッターはユーザーのビューの下部に貼り付けられ、ユーザーがスクロールしてもそこにとどまります。

スティッキーフッターは、スクロール可能なページが長いが、ユーザーがページの下部に到達する前に UI を表示したい場合に特に便利です。

CSS の魔法と基本的な HTML の知識があれば、React でスティッキーフッターを作成することもできます。

React で通常の CSS と React を使用してスティッキーフッターを作成する

React でスティッキーフッターを作成することは、単に div を作成してその位置を下部に固定するよりも複雑です。div に position:fixed プロパティを設定することは良いスタートですが、十分ではありません。

fixed 値の問題は、通常のドキュメントフローから要素が削除されることです。したがって、ページの下部に UI 要素またはテキストがある場合、それはスティッキーな div とオーバーラップします。

この欠点にもかかわらず、スティッキーフッターを作成するには position:fixed が必要です。

解決策は、ラッパーdiv（ドキュメントフローのスペースを占める div 要素）を作成することです。このような div を作成すると、スティッキーフッターが通常の HTML 要素と重ならないようにスペースを予約できます。

コードを見てみましょう：

function StickyFooter({ children }) {
  let regularDiv = {
    backgroundColor: "black",
    borderTop: "2px solid red",
    textAlign: "center",
    padding: "40px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "80px",
    width: "100%",
}
let wrapperDiv = {
  display: 'block',
  padding: '40px',
  height: '80px',
  width: '100%',
}
    return (
        <div style={{height: "200vh"}}>
            <div style={wrapperDiv} />
            <div style={regularDiv}>
                { children }
            </div>
        </div>
    )
}

ここでは、スティッキーdiv とラッパーdiv を定義して、そのためのスペースを予約します。このように、スティッキーな div はページのどの部分もカバーしません。

例のように、プロップを分解することもできます。StickyFooter コンポーネントの開始タグと終了タグの間に配置する要素はすべて、スティッキーフッターの内側に配置されます。