Стиль фона Flex с зазором на позиции закрепленCSS

Разбираемся в CSS
Ответить
Anonymous
 Стиль фона Flex с зазором на позиции закреплен

Сообщение Anonymous »

Я использую фиксированную позицию внутри гибкого блока CSS. Однако при прокрутке я бы хотел, чтобы прокручиваемые элементы были скрыты за прикрепленной частью заголовка и не хотелось бы, чтобы они были видны. Есть ли какой-нибудь вариант это исправить, например. наличие другого фиксированного элемента, который не занимает начального пространства прокрутки, который находится за липким и перед прокручиваемыми элементами?
См. здесь: строка между заголовком и разделом в области прокрутки должна быть скрытым
Изображение


Код: Выделить всё

html, body {
overflow: hidden;
}

.view {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
background-color: #EEE;
overflow-y: scroll;
height: 400px;
padding: 10px;
}

.stick-header {
position: sticky;
top: 0px;
background-color: #CCC;
border-radius: 4px;
height: 20px;
padding: 10px;
}

.stick-section {
position: sticky;
top: 60px;
background-color: #333;
color: white;
border-radius: 10px;
height: 20px;
padding: 10px;
}

.row {
background-color: green;
padding: 10px;
}

Код: Выделить всё

Row Content before Header
Header
Section
Row Content
Row Content
Row Content
Row Content
Row Content
Section
Row Content
Row Content
Row Content
Row Content
Row Content
Section
Row Content
Row Content
Row Content
Row Content
Row Content
Row Content
Row Content
Section
Row Content
Row Content
Row Content
Row Content
Row Content
Row Content
Row Content
Row Content
Row Content
Section
Row Content
Row Content
Row Content
Row Content
Row Content



Подробнее здесь: https://stackoverflow.com/questions/787 ... ion-sticky
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»