better-scroll 中使用fixed 布局所产生的问题以及解决方法

项目场景：

H5移动端项目常用的better-scroll 滑动插件在使用中，想实现头部固定可横向滚动，内容横向、纵向滚动，那么头部就会用到fixed 布局。

问题描述：

滑动的父级元素下如果有使用fixed 布局的子元素,

当父级元素滚动后生成的transform 属性会将 relative/absolute 都无法影响的 fixed 改变为absolute，

使position：fixed 失效，

原因分析：

这是css 所出现的问题，目前暂无办法解决；
这个特性表现，目前只在Chrome浏览器/FireFox浏览器下有，IE浏览器，包括IE11, fixed还是fixed的表现。

解决方案：

解决办法： 可以使用原生的 overflow-x/y 来实现，不会影响fixed 布局

以下是不使用fixed 布局 使头部固定 内容纵向滑动 不横向滑动 父级盒子横向滑动 不纵向滑动

$width=1200
.father{
	width:100%
	height: 100%
	overflow:hidden
	overflow-x:scroll
	.header{
		width: $width
		padding: 15px 16px
		height:65px
	}
	.content{
		width: $width
		overflow-y: scroll
		overflow-x: hidden 
		height: calc(100% - 65px)
	}
}

详细解释：
https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
https://www.w3school.com.cn/css/pr_pos_overflow.asp

表格布局： https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp

如有其它解决方法 欢迎各位小伙伴下面留言