position sticky粘性定位

粘性定位特别适合某些导航栏的交互展示。

1. postion属性

position属性用于指定一个元素在文档中的定位方式。
取值:

  • static:该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
    relative
    该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
  • absolute:不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
  • fixed:不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。
  • sticky:盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

2. 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

  • 查看demo(ios或高版本Chrome/Firefox)

其中.m-demo1粘性定位样式如下

1
2
3
position: -webkit-sticky;
position: sticky;
top: 0;

标示”20”(.m-demo1)首先位于19下方,如下图1;在页面滚动到页面窗口顶部时,”20”固定在屏幕顶部,如下图2。
图1
图2

2.1 兼容情况

position sticky

可以看出,兼容情况并非很好,目前主要就ios和高版本Chrome/Firefox兼容较好。在移动端如需兼容android,则需要通过js 来写hack。

2.2 动态检查兼容情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* @function checkCssSupport
* @param {String} attr 属性名
* @param {String} value 属性值
*/
function checkCssSupport (attr, value) {
let element = document.createElement('div');
if (attr in element.style) {
element.style[attr] = value;
return element.style[attr] === value;
} else return false;
}

checkCssSupport('position', 'sticky');

2.3 不兼容的设备的实现思路

监听页面/容器滚动,设置临界阀值,需要固定时position:fixed,不需要固定的时候position:relative或position:absolute。

3 特点

  • 使用粘性布局的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
  • 粘性布局的展示效果受其父辈元素影响:父级元素的overflow属性如果不是默认的visible属性,否则sticky元素则相对于该父元素定位(没有粘滞效果),因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。

参考: