animate实现顶部菜单导航在鼠标滚轮向上显示，向下隐藏

安装动画库

import "animate.css";

推荐配合使用：鼠标到了盒子位置号触发该动画效果

import VueAnimateOnScroll from "vue-animate-onscroll";

Vue.use(VueAnimateOnScroll);

  <div class="tabBar animate__animated animate__fadeInDown" id="header">
  </div>

 .tabBar {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 10;
}

 mounted() {
        window.addEventListener("scroll", this.handleScroll, true)
    },
 beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll, true);
    },
    
    
handleScroll() {
            // 页面滚动距顶部距离
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            let scroll = scrollTop - this.i;
            this.i = scrollTop;
            // 在顶部时，需要去掉fixed
            if (scrollTop === 0) {
                document
                    .getElementById("header")
                    .classList.remove("animate__fadeInDown");
                document.getElementById("header").classList.remove("animate__animated");
                document.getElementById("header").classList.remove("tabBar");
                return
            }

            // 鼠标向上滚动
            if (scroll < 0) {
                document.getElementById("header").classList.add("animate__fadeInDown");
                document.getElementById("header").classList.add("animate__animated");
                document.getElementById("header").classList.add("tabBar");
            } else {
                // 鼠标向下滚动
                document
                    .getElementById("header")
                    .classList.remove("animate__fadeInDown");
                document.getElementById("header").classList.remove("animate__animated");
                document.getElementById("header").classList.remove("tabBar");
            }
        },