CSS中你可能不知道的position属性的sticky与@supports

3. position:sticky使用条件

• 父元素不能overflow:hidden或者overflow:auto属性。

• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

• 父元素的高度不能低于sticky元素的高度

• sticky元素仅在其父元素内生效

4. 例子

• 当鼠标下滑到一定高度时，触发position:sticky定位的要求，让“流行，新款，精选”固定为距离顶部44px的地方。

• css代码

• .tab-control{
    position: sticky;
    top: 44px;
  }

• html区域

<tab-control class="tab-control" :titles="['流行','新款','精选']"></tab-control>

4.1. 例子

• Document body{ width: 1000px; height: 2000px; background: green; } div{ position: sticky; top: 44px; width: 1000px; height: 200px; background: red; } span{ display: inline-block; width: 1000px; height: 200px; background: pink; } 5555554 111

• 一进来就是这样子，主角是红色那块position: sticky；因为现在还没有达到top:44px，所以现在是相对位置

• 
  

• 当我滚动超出父元素上边距44px的时候，则固定

• 
  

5. 在web开发中注意兼容性：

• sticky目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图，基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari

• 
  

• 因为有兼容性问题，所以我们要解决兼容，以下介绍@supports

6. @supports使用

• @supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式.
  
• 文档：developer.mozilla.org/zh-CN/docs/…
• 比如上面的例子2，我们怕其他浏览器不支持，可以这样写

• @supports (position: sticky){
      div{
              position: sticky;
              top: 44px;
              width: 1000px;
              height: 200px;
              background: red;
          }
  }

• 类似@media媒体查询，当浏览器支持position: sticky这个css属性才应用其中的样式
• @supports还支持条件由一条或多条使用 逻辑与（and）、逻辑或（or）、逻辑非（not）结合的名称-值对（name-value pair）组成。可以使用圆括号调整操作符的优先级。
• 检测是否支持指定的 CSS 属性
  

• @supports (animation-name: test) {
      … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
      @keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
        …
      }
  }

• not、and、or语法

• @supports not (display: grid) {
    div {
      float: right;
    }
  }
  

• @supports (display: grid) and (not (display: inline-grid)) {}

• 检测是否支持指定的CSS属性或者其带前缀版本
  

• @supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
              (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
      … /* 如果支持不带前缀以及带前缀的perspective属性,则下面指定的CSS会生效 */
  }

• js中也可以调用类似的方法：

• if(CSS.supports('display', 'grid')){
      alert('it support!')
  }

• 个人觉得这其中有个很矛盾的地方，就是这个属性基本只有在“高级”浏览器下才会是生效，但“高级”浏览器的支持范围又支持大部分的CSS属性，所以觉得把他当做一个“低级”浏览器检测器倒是个不错的选择
  

7. 使用sticky容易遇到的“坑”

• sticky不会触发BFC

• z-index无效
  

• 当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
  

• IE低版本不支持sticky的使用
  

8. 小程序自定义导航栏中使用sticky:

• sticky是可以再小程序端生效的！ 亲测这个属性在自定义导航时特别适用

原文地址

juejin.cn/post/684490…

参考