Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
所说的吸顶效果就是在页面没有滑动之前,导航栏的效果如下图所示:当页面向上滑动之后,导航栏始终固定在页面的上方。具体代码:写入事件监听,监听滚动条。mounted () {// 事件监听滚动条window.addEventListener('scroll', this.watchScroll)}然后在 methods 中写入 watchScroll 方法。me...
·
所说的吸顶效果就是在页面没有滑动之前,导航栏的效果如下图所示:
当页面向上滑动之后,导航栏始终固定在页面的上方。
具体代码:
写入事件监听,监听滚动条。
mounted () {
// 事件监听滚动条
window.addEventListener('scroll', this.watchScroll)
}
然后在 methods 中写入 watchScroll 方法。
methods: {
watchScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 当滚动超过 50 时,实现吸顶效果
if (scrollTop > 49) {
this.navBarFixed = true
} else {
this.navBarFixed = false
}
}
}
在对应的标签中加入修改后的样式
<div :class="navBarFixed == true ? 'navBarWrap' :''">
.navBarWrap {
position:fixed;
top:0;
z-index:999;
}
END~~
作者:Howie126313
链接:https://www.jianshu.com/p/c2f2830ef9fa
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
更多推荐
已为社区贡献26条内容
所有评论(0)