Двунаправленная «липкая» позиция (как она работает, когда «исправлена») - PullRequest
Новая
       38

Двунаправленная «липкая» позиция (как она работает, когда «исправлена»)

1 голос
/ 15 апреля 2019
  • на первом изображении, когда прокрутка достигает родительского элемента, липкий элемент прилипает к нижней части экрана (как и ожидалось)
  • на втором изображении, когда прокрутка центрирует липкий элемент, который он делаетнигде не вставляйте
  • на 3-м изображении, когда прокрутка идет дальше, стик-липкий элемент в верхней части экрана (как и ожидалось)

Вот мой вопрос:

  • Насколько я понимаю, позиция закрепления переключается в положение "зафиксировано", когда элемент закрепления достигает своей позиции в области просмотра
  • на втором изображении, что определенно не так, потому что закреплениеэлемент не прилипает ни к верхней, ни к нижней части экрана
  • Почему именно этот липкий элемент делает именно на втором изображении?

.parentSticky {
    width: 50%;
    height: 800px;
    border: solid black 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}
.siblingSticky {
    width: 100%;
    height: 100px;
    background-color: orange;
    border: solid 10px red;
    display: inline-block;
    flex: 50 0 1px;
    box-sizing: border-box;
}
.Istick {
    flex-grow: 1;
    border: solid 10px green;
    box-sizing: border-box;
    position: sticky;
    bottom: 10px;
    top: 10px;
}
<!-- break tags illustrate the page's other contents (scrolling demo) -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



<div class="parentSticky">
    <div class="siblingSticky"> Element  </div>
    <div class="siblingSticky Istick" > "Sticky" element </div>
    <div class="siblingSticky"> Element </div>
</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

fig 1 fig 2 fig 3

1 Ответ

1 голос
/ 15 апреля 2019

Вы забыли важную часть о закреплении, которая является:

Элемент с фиксированным позиционированием - это элемент, вычисленное значение позиции которого является закрепленным.Он обрабатывается как относительно позиционированный, пока его содержащий блок не пересекает указанный порог ref

Так что на втором рисунке липкий элементведение себя как относительный элемент.

Чтобы использовать простые слова, липкий элемент будет вести себя как липкий, только если он будет скрыт от экрана из-за прокрутки, и в этом случае липкое поведение заставит остаться видимым .Если он уже виден (как на втором изображении), вам не нужно прилипать, и элемент будет вести себя так, как если бы он установил position:relative.

top / bottom просто используются для определениясмещения.

Дополнительные вопросы для получения дополнительной информации:

Почему позиция: липкая не работает, когда элемент обернут внутри другого?

Почему элемент с позицией: sticky не прилипает к нижней части родительского элемента?

Что такое «скролл боксы»?

...