粘性定位

发布时间 2023-03-22 21:09:36作者: zy89898976

粘性定位:相对定位和固定定位的混合,元素在跨越特定阈值前为相对定位,之后为固定定位

#one {
   position: sticky;
   top: 10px;       
}

在view视口滚动到元素top距离小于10px之前,元素为相对定位,之后,元素将固定在与顶部距离10px的位置。知道viewport视口滚到阈值以下粘性定位常用于定位字母列表的头部元素,B部分开始的头部元素在滚动A时始终处于A下方,而开始滚动B时,B的头部会固定在屏幕顶部,知道B全部完成滚动后,才被C替代。

必须指定top、right、left、bottom 4个阈值之一才能生效。