Vue实现鼠标滚动向下滚动某个距离显示导航条

先看看效果图：

没有滚动的时候：

鼠标向下滚动高度超过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;
        }
},

至此功能实现完毕！！！