在 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 组件的开始标签和结束标签之间的任何元素都将进入粘性页脚。