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;
}