Reactjs＆materialize-到达页脚后停止固定的div

Question

我正在研究一个项目，希望在屏幕上的固定位置（在导航栏下方）有一个侧面板，直到它到达页脚的顶部，这样两个面板才不会重叠。我已经找到了一些使用Jquery的建议，但是这个项目正在做出反应，我正在使用物化CSS框架。这是我在App.js ...

中使用的代码

<div className="App">
  <Navbar />
  <div className="row" id="landingcontainer">
    <div className="col s3" id="sidebar">
      <Sidebar />
    </div>
  </div>
  <Footer />
</div>

这是我的CSS的样子：

#landingcontainer {
  height: 120vh;
  position: relative;
}

#sidebar {
  position: fixed;
  height: 85vh;
  background-color: plum;
  color: white;
  top: 12vh;
  right: 5px;
}

我也为此做了一个沙盒：https://codesandbox.io/s/dawn-snow-3cmdv

现在，当用户一直滚动到底部时，侧边栏与页脚重叠。

谢谢！

Answer 1

您为什么使用物化？只需使用：https://material-ui.com/components/drawers/，至少您会避免这种问题。如果您想继续使用物化，只是，告诉我您为什么要使用position：fixed？您是否知道该位置：固定元素即使滚动页面也始终保持在同一位置？确定要不要这样做：

#landingcontainer {
  height: 120vh;
  position: relative;
  margin-bottom:0;
}

#sidebar {
  position: absolute;
  height: 100%;
  background-color: plum;
  color: white;
  top: 0;
  right: 0;
}