【小技巧】CSS 定位之 sticky 定位及应用
source link: http://mp.weixin.qq.com/s?__biz=MzI0MDIwNTQ1Mg%3D%3D&%3Bmid=2676492586&%3Bidx=1&%3Bsn=3c69ee822612a28af0b2b4f2d13f828c
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS 有两个最重要的基本属性,前端开发必须掌握:
display
和
position
。
display
属性指定网页的布局:
flex
和网格布局
grid
。
本文介绍非常有用的
position
属性的
sticky
定位。
position
属性用来指定一个元素在网页上的位置,一共有5种定位方式,即 position
属性主要有五个值。
-
static
-
relative
-
fixed
-
absolute
-
sticky
前四个相信大家都很熟悉,最后一个
sticky
是2017年浏览器才支持的。
Sticky 属性值介绍
sticky
跟前面四个属性值都不一样,它会产生动态效果,很像 relative
和 fixed
的结合:一些时候是 relative
定位(定位基点是自身默认位置),另一些时候自动变成 fixed
定位(定位基点是视口)。
因此,它能够形成“动态固定”的效果。比如,网页的搜索工具栏,初始加载时在自己的默认位置(relative 定位)。
页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位)。
等到页面重新向上滚动回到原位,工具栏也会回到默认位置。
sticky
生效的前提是,必须搭配 top、bottom、left、right 这四个属性一起使用,不能省略,否则等同于 relative 定位,不产生“动态固定”的效果。原因是这四个属性用来定义“偏移距离”,浏览器把它当作 sticky
的生效门槛。
它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与 sticky
元素的距离达到生效门槛, relative
定位自动切换为 fixed
定位;等到父元素完全脱离视口时(即完全不可见), fixed
定位自动切换回 relative
定位。
请看下面的示例代码。(注意,除了已被淘汰的 IE 以外,其他浏览器目前都支持 sticky
。但是,Safari 浏览器需要加上浏览器前缀 -webkit-
。)
#toolbar {
position: -webkit-sticky; /* safari 浏览器 */
position: sticky; /* 其他浏览器 */
top: 20px;
}
上面代码中,页面向下滚动时,
#toolbar
的父元素开始脱离视口,一旦视口的顶部与
#toolbar
的距离小于 20px(门槛值),
#toolbar
就自动变为
fixed
定位,保持与视口顶部 20px 的距离。页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),
#toolbar
恢复成
relative
定位。
Sticky 的应用
sticky
定位可以实现一些很有用的效果。除了上面提到“动态固定”效果,这里再介绍两个。
堆叠效果
堆叠效果(stacking)指的是页面滚动时,下方的元素覆盖上方的元素。下面是一个图片堆叠的例子,下方的图片会随着页面滚动,覆盖上方的图片 。
HTML 代码就是几张图片。
<div><img src="pic1.jpg"></div>
<div><img src="pic2.jpg"></div>
<div><img src="pic3.jpg"></div>
CSS 代码极其简单,只要两行。
div {
position: sticky;
top: 0;
}
它的原理是页面向下滚动时,每张图片都会变成fixed定位,导致后一张图片重叠在前一张图片上面。
表格的表头锁定
大型表格滚动的时候,表头始终固定,也可以用
sticky
实现
CSS 代码也很简单。
th {
position: sticky;
top: 0;
}
需要注意的是,
sticky
必须设在
<th>
元素上面,不能设在
<thead>
和
<tr>
元素,因为这两个元素没有
relative
定位,也就无法产生
sticky
效果。
需要源码的可以在公众号回复 ”CSS定位“
全文完
访问带链接版请点击阅读原文
往期精彩回顾
Vue Function-based API RFC(中文)
聚焦 大前端 技术和 成长 的公众号
关注我的公众号,第一时间接收原创、精选干货文章
点个在看少个 bug :point_down:
▼阅读原文排版更精美
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK