Как я могу сделать компонент фиксированным в окне для определенных интервалов прокрутки

#css #reactjs #typescript #material-ui #frontend

Вопрос:

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

Комментарии:

1. Вы можете осмотреть элемент, чтобы узнать, как они это сделали. В вашем случае вам нужно установить свойство position sticky равным, а верхнее положение-высоте навигационной панели некоторые отступы

Ответ №1:

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

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

Комментарии:

1. блестяще! Спасибо! это был один из типов должностей, которые мне еще предстояло изучить..

2. Вы можете обратиться к developer.mozilla.org/en-US/docs/Web/CSS/position или w3schools.com/cssref/pr_class_position.asp для получения более подробной информации