诺依框架，vue-element-admin，滑动固定根据左侧菜单栏展开闭合自动调整固定位置，监控左侧菜单栏展开与闭合

• 问题
• • 监控左侧菜单栏的展开与闭合及添加相关响应式的代码

问题

需求场景，需要在诺依框架中，滚动固定内容页面顶部的按钮，方便用户在较长的页面进行保存，关闭操作时不用再滚动顶部。

这里我们直接使用css 进行固定即可，但是诺依框架，vue-element-admin 左侧菜单栏是可以展开闭合，在就会导致 闭合后 固定区域 左边会空出一大部分，显然这种情况UI和项目经理是不能认可的，所以我们纪要让它滑动固定，又要让它跟着 左侧菜单栏是展开闭合而调整位置

监控左侧菜单栏的展开与闭合及添加相关响应式的代码

首先我们要能监控到左侧菜单栏的展开与闭合，而原生js并没有提供好的方法，这里我使用的是 element-resize-detector：

1. 引入element-resize-detector ，var elementResizeDetectorMaker = require(“element-resize-detector”)。
2. 使用 elementResizeDetectorMaker 监控左侧菜单栏 盒子的宽度变化，这里需要在组件 mounted 之后 进行监控，并处理相关响应式的代码。

   

   创作不易，如能对您有所帮助，感谢您的支持，欢迎打赏，充电