Блог

Я пытаюсь скопировать такой компонент, как боковая панель на этой странице airbnb. Как лучше всего использовать компонент, который остается фиксированным до тех пор, пока вы не прокрутите раздел страницы? Я использую функциональные и материальные компоненты пользовательского интерфейса, и я довольно новичок в разработке переднего плана и в типографии/html/css в целом, поэтому приношу извинения, если на это ответили в другом месте. Я не уверен, как лучше всего описать проблему, поэтому у меня возникли проблемы с поиском решений в Интернете.

Вы можете использовать position: sticky и top:0 для достижения этой цели.

Здесь top:0 установлено здесь, чтобы придерживаться верхней части страницы, если вам нужно немного места над ней, не стесняйтесь устанавливать top:50px или что-то вроде вашего желания

Это сохранит ваш контент, если он достигнет верхней части окна просмотра

 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: Запустите этот фрагмент в полноэкранном режиме

Кодовый код здесь