纳雍网站建设公司/东莞免费网站建设网络营销

什么是 Sticky

Sticky （MDN 翻译成粘性效果）是 CSS 属性 position 中的一个可选值。跟我们用得比较多的 static, fixed，relative，absolute 一样，用来描述元素的定位方式。

从效果上看，Sticky 像是混合体，页面滑动到“临界点”之前表现为 relative, 到达“临界点”时表现为 fixed。

示例

//吸顶
.btn-box{position:sticky;left:0;top:0;
}//吸底
.btn-box{position:sticky;left:0;bottom:0;
}

假设大家都已经会使用了，但是sticky使用中，无效时，那么有可能是以下几点没考虑到

注意事项

sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 sticky属性仅在以下几个条件都满足时有效：

1. 父元素不能overflow:hidden或者overflow:auto属性
2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
   父元素的高度不能低于sticky元素的高度
3. 很明显，这里父元素和子元素高度相同，所以不会用到relative定位，直接用fixed就好。