在 React 中建立一個粘滯頁尾
Irakli Tchigladze
2022年5月18日
在開發現代應用程式時,我們經常需要宣告或將使用者的注意力轉移到一些重要的事情上。
它可以通過建立一個粘性頁尾來實現。顧名思義,粘性頁尾會粘在使用者檢視的底部,即使使用者滾動也會停留在那裡。
如果你有一個較長的可滾動頁面,但希望在使用者到達頁面底部之前顯示 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
元件的開始標籤和結束標籤之間的任何元素都將進入粘性頁尾。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn