反应/部分粘页脚答案

【问题标题】：React / Partially sticky footer反应/部分粘页脚
【发布时间】：2022-01-07 17:22:38
【问题描述】：

我正在使用 Material UI 开发一个 nextjs 项目。我要创建一个带有应用栏的页面，中间基本上是无限的内容，还有一个页脚。

我正在尝试创建一个部分粘滞的页脚，其中顶部只是一个橙色的小条，已经使用 css 实现了

export default function Footer() { 
    return ( <div style={{ position: "fixed", width: "100%", backgroundColor: Colors.orange6, bottom: "0", left: "0", height: 16, }} /> );
}

我需要创建页脚的底部，它是部分粘性的。它只有在滚动到底部时才可见。

什么是优雅的实现方式？

【问题讨论】：

嗨，欢迎来到 SO！我建议您自己尝试一下，然后询问您遇到的任何问题。

标签： javascript css reactjs

【解决方案1】：

尝试检查您是否位于页面底部并有条件地隐藏和显示您的页脚。

const App = () => {
  const [isBottom, setIsBottom] = React.useState(false);

  const handleScroll = () => {

    const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight

    if (bottom) {
      setIsBottom(true)
    } else {
      setIsBottom(false)
    }

  };
  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll, {
      passive: true
    });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
     <div>content.....</div>
    <footer className={isBottom ? "showFooter" : "hideFooter"}>M</footer>
    )
};

【讨论】：