Почему элемент с позицией: липкий не прилипает к нижней части родителя? - PullRequest
Новая
       39

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

0 голосов
/ 09 февраля 2019

Я пытаюсь понять, что делает css "sticky".Я могу заставить его придерживаться «вершины» своего родителя, но не «низа»

Мой тестовый код: 

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}
1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

Когда я установил «move» на «top: 0», он прилипает к вершине розового блока, но когда установлен на «bottom: 0»Кажется, он больше не исправлен.

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Работает нормально, но ничего не увидишь.Давайте посмотрим на определение:

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

Дайте большой запас элементу блока, чтобы скрытьзатем с экрана начните медленно прокручивать 

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
}

.move {
  position: sticky;
  bottom: 0;
}
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

Вы заметите, что когда ваш элемент показывает, BBB перекрывает AAA, пока не достигнет своего начального места.Это липкое поведение при использовании bottom:0.Таким образом, наш элемент сохраняется position:relative, и когда контейнер начинает выходить из экрана сверху, он становится липким к своему дну, пока не достигнет противоположного края (верха контейнера).

Точното же самое происходит с top:0, но в обратном направлении: 

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-bottom:120vh;
}

.move {
  position: sticky;
  top: 0;
}
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

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

Для того, чтобы получить то, что вы хотите, вам нужно поместить свой элемент внизу, используя другие свойства, и держать его липким внизу.

Вотпример, где я помещаю элемент внизу, используя flexbox, и я указываю, что он должен быть липким внизу. 

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
  display:flex;
  flex-direction:column;
}

.move {
  margin-top:auto;
  position: sticky;
  bottom: 0;
}
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

Таким образом, position:sticky никогда не будет определять положение элемента, как мы делаем с absolute или fixed, но оно будет определять, как элемент застрянеткогда есть поведение прокрутки.

Вот еще примеры, чтобы лучше понять: 

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.e1 {
  position: sticky;
  top: 0;
}
.e2 {
  margin-top:auto;
  position: sticky;
  top: 0;
}
.e3 {
  position: sticky;
  top: 20px;
}
.e4 {
  position: sticky;
  bottom: 0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
  top:0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
}
<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e2">Top sticky at bottom (nothing will happen :( )</div>
</div>
<div class="block">
  <div class="e3">Top sticky at 10px</div>
</div>
<div class="block">
  <div class="e4">bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e5">top/bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e6">bottom sticky at the top (nothing will happen :( )</div>
</div>

Другая распространенная ошибка с sticky - забыть о высоте / ширине элемента относительно его родительского элемента.Если высота элемента равна высоте родительского элемента (содержащего блок), то логически не будет липкого поведения, потому что мы уже на противоположном ребре . 

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.block > div {
  border:2px solid;
} 
.e1 {
  position: sticky;
  top: 0;
}
<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e1" style="height:100%">I will not stick</div>
</div>
<div class="block">
  <div class="e1" style="height:80%">I will stick a little ..</div>
</div>
<div class="block" style="height:auto">
  <div class="e1">I will not stick too</div>
</div>

Обратите внимание на последний случай, когда высота родительского элемента установлена ​​на auto (значение по умолчанию), таким образом, его высота будет определяться его содержимым, которое делаетлипкий элемент имеет ту же высоту, что и содержащий блок, и ничего не произойдет, потому что там не будет места для липкого поведения.

0 голосов
/ 09 февраля 2019

Попробуйте следующий код: 

.block {
  background: pink;
  width: 50%;
}

.movetop {
  position: sticky;
  top: 0;
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  z-index: 1;
  border: 1px solid #777;
}

.movebot {
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  position: -webkit-sticky;
  position: sticky;
  border: 1px solid #777;
}

.movebot {
  bottom: 0
}
11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  <div class="movetop">
    header
  </div>
  content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
  <div class="movebot">
    footer
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

Вы можете найти больше о position:sticky на gedd.ski / post / position-sticky

Я надеюсьэто помогает.

Мир.?

...