#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 для получения более подробной информации