Позиция липкая с родительским верхом - PullRequest
Новая
       6

Позиция липкая с родительским верхом

0 голосов
/ 03 июля 2018

Я пытаюсь заставить что-то работать с position: sticky;, но у меня странное поведение. 

.parent {
  display: inline-block;
  height: 300px;
  width: 300px;
  overflow: scroll;
  padding-top: 25px;
}

.parent--ok {
  background-color: green;
}

.parent--nok {
  background-color:red;
}


.sticky-header {
  position: sticky;
  top: 25px;
  background-color: purple;
}
<div class="parent parent--ok">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 3</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 4</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>

<div class="parent parent--nok">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
</div>

Я сделал здесь ручку https://codepen.io/anon/pen/NzJENe, чтобы вы поняли, о чем я.

У меня есть родительский элемент с padding-top: 25px;, там у меня есть неопределенное количество пар div, состоящих из заголовка и содержимого. Я хочу, чтобы заголовки были липкими, но с учетом 25-пиксельного отступа родителя. Поэтому я добавил к ним top: 25px;. Самое странное, что это работает до тех пор, пока у меня достаточно пар в родительском элементе для переполнения. Если у меня нет переполнения, мои заголовки получают дополнительный интервал в 25 пикселей выше, чего я не хочу.

вот как это выглядит для меня: Screenshot

РЕДАКТИРОВАТЬ: Это было проверено в хром.

1 Ответ

0 голосов
/ 03 июля 2018

Sticky немного сложнее, просто потому что это гибрид между фиксированным и относительным расположением. Использование top, отличного от 0, для липкого элемента может привести к странному поведению. Я думаю, это то, что вы испытали в Chrome.

Более того, у вас разное поведение в разных браузерах (или нет) ... Я бы выбрал дополнительный контейнер (в примере с именем .holder, чтобы сохранить этот верхний слой 25px.

HTML 

<div class="parent parent--ok">
    <div class="holder">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 3</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 4</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
        </div>
</div>

<div class="parent parent--nok">
    <div class="holder">
    <div class="sticky-header">Sticky</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    <div class="sticky-header">Sticky 2</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lectus risus, volutpat auctor mi mollis vitae. Nullam eget scelerisque odio. Cras enim ante, cursus quis feugiat id, maximus sed nibh.</div>
    </div>
</div>

CSS 

.parent {
  display: inline-block;
  height: 300px;
  width: 300px;
  padding-top: 25px;
}
.holder{
 height: 100%;
 overflow: scroll; 
}

.parent--ok {
  background-color: green;
}

.parent--nok {
  background-color:red;
}


.sticky-header {
  position: sticky;
  top: 0;
  background-color: purple;
}

Это Jsfiddle

...