vue项目，在页面滚动时js判断向上向下，控制头部header的显示和隐藏

这是一个流行已久的操作，一个页面在向下滚动时，隐藏头部；向上滚动时，出现头部。

向下滚动，这样可以尽可能多地展示内容区；

向上滚动，即时展示头部，方便用户查看菜单信息，打开菜单键；

写法也很简单，在页面挂载完成后，添加监听事件，判断滚动方向，页面销毁之前注销事件即可。

以下贴代码，记录于此。

<script>
export default {
  data() {
    return {
      i: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    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("show");
        return
      }

      // 鼠标向上滚动
      if (scroll < 0) {
        document.getElementById("header").classList.add("animate__fadeInDown");
        document.getElementById("header").classList.add("animate__animated");
        document.getElementById("header").classList.add("show");
      } else {
      // 鼠标向下滚动
        document
          .getElementById("header")
          .classList.remove("animate__fadeInDown");
        document.getElementById("header").classList.remove("animate__animated");
        document.getElementById("header").classList.remove("show");
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
};
</script>