CSS3粘性布局-stiky

Posted on | In

应用场景

  1. 待办事项列表
  2. 电话簿列表
  3. 滑动一定距离之后使导航条nav固定在顶部

常规方法

用js监听页面的滚动距离,判断每一区块距离视口顶部距离，超过了则设定该区块position:fixed，反之去掉。

position:sticky

css3中position新特性sticky, 存在兼容问题

sticky原理

sticky可以认为是relative和fixed的结合。在超过规定阈值前是相对定位（relative），超过之后是固定定位（fixed）

例如：设定阈值是 top:0

  1. 当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现
  2. 当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部
1
2
3
4
5
{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

position:sticky 使用规则

1. 须指定top, right, bottom或left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
2. top和bottom同时设置时，top生效的优先级高
3. left和right同时设置时，left的优先级高。
3. 设定为position:sticky元素的任意父节点的overflow属性必须是visible，否则position:sticky不会生效。
    a) 如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以position:sticky 元素也不会有滚动然后固定的情况。
    b) 如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对viewprot定位。达到设定的阀值。
    c) 这个还算好理解，也就是设定了position:sticky的元素表现为relative还是fixed是根据元素是否达到设定了的阈值决定的。

兼容

  1. 除了Firefox， safari的其它浏览器 需要使用前缀
  2. chrome中可以有另一种方法实现兼容
    a) chrome浏览器访问 chrome://flags/
    b) 启用实验性网络平台功能alt
  3. 使用插件实现各浏览器兼容
    https://github.com/filamentgroup/fixed-sticky