首先要实现监听滚动条的位置：
（1）在mounted钩子函数中随便定义一个方法来获取滚动条变化：
window.addEventListener('scroll', this.handleScroll, true)
（2）将其加入到设置的方法中：
methods:{handleScroll () {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop}
（3）方便在浏览器中观察是否监视成功，可以在其方法中加入：
console.log(scrollTop)
（4）监视成功会显示如下：
监听工作完成后，接下来就到判断滚动条变化距离是否大于导航栏到顶部的距离了。
（1）在上面方法中加入（其中的#footer和div中的class和id相对应）：
var offsetTop = document.querySelector('#footer').offsetTop//如果滑动距离大于元素到顶部的距离就使用searchBarFixedif (scrollTop > offsetTop) {this.searchBarFixed = true} else {this.searchBarFixed = false}
（2） 在data中添加searchBarFixed变量并赋值其空。
data() {return {searchBarFixed:''}}
判断工作完成后，就该样式变换环节了。
（1）如果滚动条距离大时，就使用isFixed的样式。否则使用原样式。
#footer .isFixed{position:fixed;background-color:#Fff;top:0;z-index:999;}
（2）在导航栏中加入三目运算来实现样式的最终变换：
<el-menu>:class="searchBarFixed === true ? 'isFixed' :''"...//其他样式就不贴了</el-menu>
最后贴一下主要布局标签(主要是方便对照上面的关键变量)：
<div class="footer" id="footer"><el-row><el-menu:class="searchBarFixed === true ? 'isFixed' :''"</el-menu></el-row></div>
附一下效果图：最后跳转页面时，控制台会爆红。但是也不影响这个效果。但是强迫症得我受不了。解决方法是：去另一个页面时将该监听事件移除
//和mounted函数同一级别。离开页面的时候，便会调用这个函数(具体可以看看vue的的生命周期)，我们常用来销毁一些监听事件及定时函数destroyed () {window.removeEventListener('scroll', this.handleScroll)}
参考博客：参考博客
如果觉得《监听滚动条事件来实现导航栏吸顶效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
