position:sticky

使用sticky定位可以简洁的实现固定功能

例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动

以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布局上复杂一些

使用position:sticky,能让元素在离视口的距离达到指定值时,固定不动.而未达到时,正常滚动.并且不脱离文档流

使用场景1:

左侧菜单,左侧内容布局时.滚动右侧内容,但不希望左侧的菜单滚出视口区域,而是一直在视口区域内,可以有一定滚动范围

// 菜单dom

.menu-box{
  position: sticky;
  top:40px;// 离视口40px时,停止滚动,固定不动了
  max-height:60rem;
  overflow-x:hidden;
  overflow-y:auto;
}