网页页脚停留在页面底部。向下滚动时需要它出现[关闭]

Question

我制作的 Web 页脚应该在您到达页面底部时显示，但停留在屏幕底部，占据了屏幕的一半。

我的 React 网站没有按预期运行。我在页面底部制作了一个带有链接的页脚，但我希望它只在您向下滚动到页面底部时显示，而不是始终停留在底部。

代码很多所以这里是代码的 Git 存储库：https://github.com/CodingWithTonyB/React-Web

我相信盒子的位置与这段代码有关：

export const Box = styled.div`
padding: 80px 60px;
background: black;
position: fixed;
bottom: 0;
width: 100%;

Answer 1

我读过你的代码。

// path:App.js

    <div>
      <Footer />
      <Router>
      <Sidebar />
      <Routes>
        some thing...
      </Routes>
      </Router>
    </div>

如果你只是想让它以正常的方式显示，你可以尝试一些改变如下：

    <div>
      <Router>
      <Sidebar />
      <Routes>
        some thing...
      </Routes>
      </Router>
      <Footer />
    </div>

而且你还必须在

FooterStyle.js

中编辑样式

export const Box = styled.div`
  padding: 80px 60px;
  background: black;
  position: absolute;
  bottom: 0;
  width: 100%;    
  background-attachment: scroll;
  background-position: 0% 0%;
- position: fixed;
- bottom: 0pt;
- left: 0pt;