表头跟随
表头跟随

图中展示的效果使我们在日常开发中常见的效果。
以前我都是用js判断是否滚动一定距离然后给这个元素设置position:fixed这种方式来做的,
今天就来记录一下用css怎么做

一、介绍

css 中的 position 属性的值常用的主要有下面几种:
1.absolute
2.relative
3.fixed
现在用到的值为 sticky
设置了sticky的元素,不脱离文档流,在屏幕范围时(viewport),该元素位置不受到定位影响(top、left等值无效),当该元素的视图将要离开偏移范围时,定位会变成 fixed 的效果,并且根据设置的top 、left值进行定位

二、用法

上面的gif图里,我将搜索框的元素设置为

1
2
3
postion:sticky;
top:0;
left:0

所以当移出屏幕时就会触发fixed定位

三、兼容性

刚刚把它用在实际项目中去了,结果安卓自带的浏览器不支持,所以附加上解决办法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//判断是否支持
if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
// 支持 sticky,顶部吸附
this.setState({
support:true
})
}else{
document.addEventListener('scroll',this._scrollTop)
}
//不支持的主要处理
_scrollTop(){
let offsetY=this.searchDOM.offsetTop;
let css=null;
if(window.scrollY>offsetY){
css={
position:'fixed',
top:0,
zIndex:999
}
}else{
css={
position:'static',
}
}
this.setState({
css
})
}

四、总结

  • 该元素不脱离文档流,仍保留元素原本在文档流中的位置
  • 当元素在容器中被滚动超过指定偏移值时,元素在容器内固定在指定位置。比如你设置了 top:50px 那么sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动
  • 元素固定的相对偏移是相对于它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于 viewport 来计算元素的偏移量