解决页面动态计算样式尺寸时页面滚动，导航栏固定位置不准确问题以及子元素固定无法保持子元素与父元素宽度一致问题

背景

在最近的项目中，其他开发人员在页面中加了根据视口宽度计算尺寸的统一样式，所有像素单位都会被转换成vw

问题

在容器内部滚动时，需要固定导航栏，使其不与页面内容一起滚动，始终悬浮在容器顶部，但是将el-affix 只接受Number类型数据，并在滚动时将其转化为px单位，由于项目所有px都会转化为vw，所以当设备宽度不一致时，导航栏固定位置不准确；如果使用position:absolute会导致子元素脱离文档流，从而无法获得父元素宽度

解决办法

结合使用el-affix和position的sticky属性，既保证了子元素与父元素宽度一致，也保证了导航栏始终在容器顶部

<div>
<el-affix style="position:sticky;top:0;z-index:2">
<div>导航栏</div>
</el-affix>
<div style="z-index:1">需要滚动的内容</div>
</div>