在 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 不會覆蓋頁面的任何部分。

你還可以像示例中那樣解構 props。你放置在 StickyFooter 元件的開始標籤和結束標籤之間的任何元素都將進入粘性頁尾。