I'm trying to replicate a component like the sidebar on this airbnb page. What's the best way to have a component which stays fixed until you scroll past a section of the page? I'm using functional React and Material-UI components and I'm pretty new to Front End development and typescript/html/css in general, so apologies if this has been answered elsewhere. I'm unsure what the best way to describe the problem is, so i've had trouble finding solutions online.

CodePudding user response：

You can use position: sticky and top:0 to achieve this.

Here top:0 is set here to stick to the top of the page if you want some space above it feel free to set top:50px or something like your wish

This will stick your content if the content reach the top of the viewport

div{display: block;}

.some_top_content {
  width: 100%;
  height: 100px;
  background: yellow;
}

.container::after {
  clear: both;
  display: table;
  content: '';
}

*{box-sizing: border-box;}

.left_content {
  height: 800px;
  float: left;
  width: 48%;
  margin-right: 4%;
  background: blue;
}

.right_content {
  width: 48%;
  float: right;
  position: sticky;
  top: 0;
  height:  400px;
  background: green;
}

.some_bottom_content {
  width: 100%;
  height: 600px;
  background: red;
}

<div class="some_top_content"></div>
<div class="container">
  <div class="left_content"></div>
  <div class="right_content"></div>
</div>
<div class="some_bottom_content"></div>

PS: Run this snippet in full page view

Codepen here