CSS粘性定位(position: sticky)是怎样工作的?

浏览器对 CSS粘性定位有着非常好的支持,但很多开发者都没有用过它。

究其原因有两个:

 ● 第一,受到浏览器的良好支持需要漫长的等待:浏览器的支持往往需要很长的时间才能完成,到时候它的功能已经被人们遗忘了。

 ● 第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑,这就是我的切入点。

我假设你们都知道什么是CSS定位,不过还是先简单回顾一下比较好:

在3年前,有四种 CSS 定位: staticrelativeabsolutefixed

staticrelativeabsolutefixed之间主要的区别在于它们在DOM流中占用的空间。 staticrelative 会保留它们在文档流中的自然空间,而 absolutefixed 则不会 —— 它们的空间被移除而且具有浮动行为。

正如我下面将要解释的那样,新的粘性定位与所有类型都有相似之处。

我的第一个粘性定位

可能很多人都玩过粘性定位。我已经接触过一段时间了,直到我意识到自己并不是完全理解它。

在第一个例子中,大家很容易就能看明白 当视口到达定义的位置时,元素会被粘住。

例:

.some-component{
    position: sticky;
    top: 0;
}

但问题是,它有时候能用,而有时却不起作用。 当它工作时,元素会粘住,但在滚动到其他部分,它会停止粘贴。 作为一个靠 CSS 混饭吃的人,我完全不能接受自己对这个问题是不理解的,所以我决定把粘性位置彻底搞清楚。

探索粘性定位

在摆弄它的过程中,我很快就注意到了:当一个具有 position:sticky 样式的元素被包装,且它是包装元素中唯一的元素时,这个被定义为 position:sticky 的元素就不会粘住。

<!-- DOESN'T WORK!!! -->
<style>
    .sticky{
        position: sticky;
        top: 0;
    }
</style>
<div class="wrapper">
   <div class="sticky">
        SOME CONTENT
   </div>
</div>

当我在包装元素中添加更多元素时,它就能开始正常工作了。

这是为什么?

这是因为当一个元素被赋予 position: sticky 样式时,粘性项目的容器是它可以粘贴的唯一区域。 粘性元素没有任何要浮动的元素,因为它只能浮动在同级元素上,作为唯一的子元素,它不能浮动。

怎样才能让 CSS 粘性定位起作用

CSS 粘性定位有两个主要部分,粘性元素(sticky item)粘性容器(sticky container)

粘性元素 —— 是我们用位置定义的 position: sticky 样式。 当视口位置与位置定义匹配时,该元素将会浮动,例如: top: 0px

例:

.some-component{
    position: sticky;
    top: 0px;
}

粘性容器 —— 是包装粘性元素的 HTML 元素。 这是粘性元素可以浮动的最大区域。

当你定义一个具有 position:sticky 样式的元素时,父元素会被自动定义为粘性容器!
记住这一点非常重要! 容器是粘性元素的范围,并且该元素无法离开其所在的粘性容器。

这就是为什么在前面的例子中,粘性元素没有被粘住的原因:这个粘性元素是粘性容器中唯一的子元素。

CSS 粘性定位的示意图:

2.png

粘性元素与粘性容器

查看在CodePen上的例子:

https://codepen.io/elad2412/pen/QYLEdK

理解 CSS 的粘性行为

正如我前面说过的那样,CSS 粘性定位的行为与所有其他 CSS 定位不一样,但从另一个角度来说,它们也有一些相似之处。我来解释一下:

相对(或静态)—— 粘性定位元素类似于相对和静态位置,因为它保留了 DOM 中的自然间隙(留在流中)。
固定 —— 当元素被粘住时,它的行为与 position: fixed 完全相同,浮动在与视口的相同位置,并从流中移除。
绝对 —— 在粘贴区域的末尾,元素会停止,并堆叠在另一个元素的顶部,就像一个绝对定位的元素被放在一个 position: relative 容器内的行为。

粘在底部?

在大多数情况下,您可以使用粘性定位将元素粘贴到顶部,如下所示:

.component{
    position: sticky;
    top: 0;
}

这正是它被设计的初衷,而在此之前,只能使用JavaScript完成这个功能。

但你也可以使用它把元素粘到底部。 这意味着你可以把页脚定义为粘性,并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器的末端时,元素会停在它的自然位置。 最好是在以粘性容器底部为自然位置的元素上使用它。

完整示例:

HTML

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

.main-footer{     
     position: sticky; 
     bottom: 0;
}

去CodePen查看演示效果:https://codepen.io/elad2412/pen/MZZVjw

我在开发中常用它来粘贴摘要表,也会用在粘性页脚导航上,这种方法非常适合。

浏览器支持

  • 除了老 IE 浏览器外,所有流行的现代浏览器都支持粘性定位。
  • 如果用在 Safari 浏览器上,你需要添加 -webkit 前缀。
position: -webkit-sticky; /* Safari */  
position: sticky;

3.png

最后的话

本文到此就结束了,我希望你能喜欢这篇文章,并从我的经验中学习到一些东西。
如果你喜欢这篇文章,我会非常感谢你的掌声和分享 :-)

原文地址:https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46

为了保证的可读性,本文采用意译而非直译

Image placeholder
前端答疑
未设置
  15人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css怎么设置粘性定位?

css怎么设置粘性定位?粘性定位的设置方法是给元素添加position:sticky;,sticky是css定位新增属性,类似static(没有定位)和固定定位fixed的结合。它主要用在对scrol

css定位(position)属性怎么用?

position属性规定元素的定位类型。说明position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于

PHP 内核:foreach 是如何工作的?

foreach是如何工作的? 首先声明,我知道foreach是什么,也知道怎么去用它。但这个问题关心的是,内核中foreach是如何运行的,我不想回答关于“如何使用foreach循环数组”的任何问题。

小米Kylin平滑迁移HBase实践

根据美团等其他公司在Kylin社区的公开分享资料,跨HBase集群升级方案需要在新集群重新构建历史的Cube,或者有一段时间的服务停止。小米在Kylin生产环境的跨HBase集群迁移中实现了无中断的平

1.0. 抽象工厂模式(Abstract Factory)

1.1.1.目的 在不指定具体类的情况下创建一系列相关或依赖对象。通常创建的类都实现相同的接口。抽象工厂的客户并不关心这些对象是如何创建的,它只是知道它们是如何一起运行的。 1.1.2.UML图 1

航空公司系统是怎样炼成的?

刚接触航空业时,觉得自己像刚踏上美洲的弗朗西斯科.皮萨罗,或是刚遇见毛利人的库克船长,仿佛走进了信息技术的蛮荒之地,随便播下一颗“现代技术”种子,就能长出一片跨时代的技术森林。与国内行业解决方案提供商

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

css中ul怎么定位

css中ul怎么定位css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的cssposition属性即可。关于定位的几种方式1、static定位(普通流定位)--默认定

css定位怎么实现居中?

css定位怎么实现居中?使用绝对定位absolute是一种常用、兼容性很好的方式。.element{ width:600px;height:400px; position:absolute; left

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

微信支付退款解析 对加密串 B 做 AES-256-ECB 解密(PKCS7Padding)

微信支付退款解析对加密串B做AES-256-ECB解密(PKCS7Padding)1.微信支付文档 https://pay.weixin.qq.com/wiki/doc/api/H5....解密方式解

央视网黄乐:安全合规是一切工作的重要基础

“安全无小事”这一句口号相信大家都较为耳熟,而随着网络技术的不断应用落地,这句口号不再仅仅是一句口号。由于网络安全威胁的不断升级,企业组织对于网络安全的重视程度不断加深。但在安全方面的投入或许还远远不

SQL优化案例-定位系统中大量的rollback(十八)

系统中logfilesync比较严重,查看存储都没有问题,logfileparallelwrite很低,时间分布直方图也没问题数据库中提交和回滚操作比较频繁,每秒1000多次,rollback占比1/

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

dw里怎样设置图片的css样式

dw里怎样设置图片的css样式1、首先在文件内插入一张图片,点击插入\图像,选择一张图片即可。2、选中图像,点击css样式窗口的+号,新建一个CSS(相关课程推荐:css视频教程)样式,打开对话框。选

怎样新建css文件?

怎样新建css文件?css文件就是一个普通的文本文件,只是后缀名是.css。在windows操作系统下,文本文件命名为.txt,我们右键桌面——新建——文本文件,然后右键文本文件——重命名,将后缀名改

css添加图片怎样找图片路径?

css添加图片怎样找图片路径?在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到。现在来看两个文件目录:/css/admin/main.css//

css怎样给元素加入边框?

css怎样给元素加入边框?css给元素设置边框使用border属性,这是一个简写属性,分别是指边框的宽度、样式、颜色。它可以按顺序设置如下属性:border-widthborder-stylebord

PHP 是怎么接收到请求的?

php是怎么接收到请求的? 本片文章主要描述一下几点 nginx怎么转发请求给PHPFPM? CGI和FastCGI到底是个什么玩意? PHPFPM是什么?有什么作用? 简单场景描述 在浏览器上访

JVM是怎么和操作系统交互的?

来源:阿里巴巴中间件肉眼看计算机是由CPU、内存、显示器这些硬件设备组成,但大部分人从事的是软件开发工作。计算机底层原理就是连通硬件和软件的桥梁,理解计算机底层原理才能在程序设计这条路上越走越快,越走

当年“你说什么,我都能实现”的软件公司,后来都是怎么死的?

在 #“我,80后,曾经靠副业的收入买车买房”# 的评论区里,有读者问,十几年前,圈内有不少软件公司,规模大小不一,遍布各个行业,但这几年似乎都没动静了,他们还活着吗?我说,撇开纯做“劳工”输出的外包

当金融科技遇上云原生,蚂蚁金服是怎么做安全架构的?

蚂蚁金服在过去十五年重塑支付改变生活,为全球超过十二亿人提供服务,这些背后离不开技术的支撑。在2019杭州云栖大会上,蚂蚁金服将十五年来的技术沉淀,以及面向未来的金融技术创新和参会者分享。我们将其中的

Fish Redux中的Dispatch是怎么实现的?

前言开源地址:https://github.com/alibaba/fish-redux我们在使用fish-redux构建应用的时候,界面代码(view)和事件的处理逻辑(reducer,effe