使用sticky定位可以简洁的实现固定功能
例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动
以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布局上复杂一些
使用position:sticky,能让元素在离视口的距离达到指定值时,固定不动.而未达到时,正常滚动.并且不脱离文档流
使用场景1:
左侧菜单,左侧内容布局时.滚动右侧内容,但不希望左侧的菜单滚出视口区域,而是一直在视口区域内,可以有一定滚动范围
// 菜单dom
.menu-box{
position: sticky;
top:40px;// 离视口40px时,停止滚动,固定不动了
max-height:60rem;
overflow-x:hidden;
overflow-y:auto;
}
