Vue实现鼠标滚动向下滚动某个距离显示导航条
先看看效果图:没有滚动的时候:鼠标向下滚动高度超过200时显示导航分类:鼠标放在商品分类上显示更多分类(鼠标移出隐藏):接下来看详细代码步骤:首先定义导航分类及更多分类:解析:在data里边定义navTab和fenLei默认状态为false(隐藏状态)@mouseenter="onMouseOver"和@mouseleave="onMouseout"...
·
先看看效果图:
没有滚动的时候:
鼠标向下滚动高度超过200时显示导航分类:
鼠标放在商品分类上显示更多分类(鼠标移出隐藏):
接下来看详细代码步骤:
首先定义导航分类及更多分类:
解析:在data里边定义navTab和fenLei默认状态为false(隐藏状态)
@mouseenter="onMouseOver"和@mouseleave="onMouseout"分别为商品分类上鼠标移入移出事件
最后就是实现这个功能的方法,如下:
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 500){
this.tabNav = 1;
}else if(scrollTop < 500) {
this.tabNav = 0;
}
},
至此功能实现完毕!!!
更多推荐
已为社区贡献42条内容
所有评论(0)