不二博客

V1

2022/11/26阅读:19主题:山吹

你可能真的不会sticky

前言

position: sticky 是开发中相对高频的一个用法,不过在最近的项目中竟然被我玩翻车了,设置了sticky竟然不生效了,于是便想一探究竟。

元素根据正常文档流进行定位,然后相对它的最近滚动祖先和 containing block (最近块级祖先 nearest block-level ancestor),包括 table-related 元素,基于 top,right, bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文(stacking context)。注意,一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的 overflow 是 hidden, scroll, auto, 或 overlay 时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为

它是做什么的?

  • 它先以正常的文档流的定时进行定位,当页面滚动到指定位置的时候会脱离文档流。

它有什么问题?

  • 它是相对于最近的滚动元素进行定位的
  • 它可以被父级元素的overflow属性所影响

sticky 的正常效果

<div class="content-wrap">
  <div class="content">
    <div class="top">顶部区域</div>
    <div class="sticky">粘性布局</div>
    <div class="bottom">底部区域</div>
  </div>
</div>

<style>
  .top {
    height100px;
    text-align: center;
    background-color: gray;
  }

  .bottom {
    height2000px;
    background-color: paleturquoise;
  }

  .sticky {
    height30px;
    background-color: red;
    position: sticky;
    top0px;
  }
</style>

失效的原因

sticky 设置了非滚动父元素。

 <div class="prent">
   <div class="sticky">粘性布局</div>
 </div>

当我们将为sticky元素设置了父组件时,也就是sticky的父元素不为body根元素时,此时的sticky定位时相对于prent元素的 在这里插入图片描述 当然现在我们还没有办法去理解这样的一个行为,我们来给prent加一点高度再来看一看

 .prent {
   border2px solid yellow;
   height200px;
   background-color#aaaaaa;
 }

有趣的是,当元素滑动到prent时,sticky元素开始生效了;

当我们继续向下滑动到bottom时,sticky元素随着prent元素离开了页面。

那么我们就可以得出结论,sticky元素的定位时相对于父级元素的,并且父级元素需要为可滚动的元素

父元素设置 overflow

前面说道,当sticky脱离了文档流,使用overflow属性的以下hidden, scroll, auto, 或 overlay时会阻止元素的定位。

.prent {
  border2px solid yellow;
  height200px;
  background-color#aaaaaa;
  overflow: hidden;
}

总结

1、使用sticky是父级元素需要拥有滚动机制

2、使用sticky不使用overflow的属性

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信,我们一同探讨学习!

如果觉得这篇文章对你有所帮助,点赞、在看是最大的支持!

分类:

前端

标签:

CSS

作者介绍

不二博客
V1