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




css3 css-position (2)

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

.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 на gedd.ski/post/position-sticky

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

Мир. 🖖

Я пытаюсь понять, что делает 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», он больше не кажется фиксированным / липким.


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

Элемент с липким позиционированием - это элемент, вычисленное значение позиции которого является липким. Он обрабатывается как относительно позиционированный, пока его содержащий блок не пересекает заданный порог (например, задает для 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>

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

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

Вот пример, где я помещаю элемент внизу, используя 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 (значение по умолчанию), таким образом, его высота будет определяться его содержимым, в результате чего липкий элемент будет иметь ту же высоту, что и содержащий блок, и ничего не произойдет, потому что не будет комната для липкого поведения.





sticky