position:sticky粘性布局

  作者:冷影再见   标签:[ css3 ]  点击:[ 113 ]
简介: 估计大部分都没有用过position:sticky吧。这个属性值还在试验阶段。怎样描述它呢? sticky:对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。

作用

  • 它是相对定位position:relative和固定定位position:fixed的混合。在屏幕范围时该元素并不受到定位的影响(left、top等属性),当该元素将要滚动到某一阈值点(例:top:10px;),根据left、top等属性成固定定位fixed的效果。

  • 不再用监听scroll事件,既可实现导航栏滚动绝对定位的效果

生效规则

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

    • 并且 top  bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。
  • 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下:

    • 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。
    • 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。
  • 达到设定的阀值。这个还算好理解,也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

注意:该元素不脱离文档流,仍然保留元素原本在文档流中的位置

兼容性

  • IE11

  • edge

  • chrome

  • firxfox

  • safari

Q: 如何兼容IE11?

A: 使用position: fixed;,或者使用sticky填充包

Q: Safari中无效如何解决?

A: 使用posititon :-webkit-sticky;

代码:

{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}