首先要实现监听滚动条的位置:
(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)}
参考博客:参考博客
如果觉得《监听滚动条事件来实现导航栏吸顶效果》对你有帮助,请点赞、收藏,并留下你的观点哦!