css3 粘性固定 position:sticky

当我们在使用css3对我们的网页进行修饰的时候,你有没有过这种场景在一个希望不用监听scroll事件,导航栏实现滚动绝对定位的效果。

.nav{ position:sticky; top: 80px}

当viewport 视口滚动到 元素距离小于设置的80px的时候,元素属于相对定位relative,
当viewport 视口滚动到元素距离大于设置的80px的时候,元素此时属于绝对定位absolute,
这样我们便实现不适用js对导航实现滚动绝对定位。**
css3 粘性固定 position:sticky_第1张图片

css3 粘性固定 position:sticky_第2张图片
**要实现这些有以下几个要求

父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效**

你可能感兴趣的:(css3 粘性固定 position:sticky)