在 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