Vue、JS判断滚动方向【Nav导航条根据滚动条方向显示淡入淡出效果。】

目的

$graph TD
Start --> Stop$

这个代码主要实现了：Nav导航条根据滚动条方向显示淡入淡出效果。 Nav的定位是fixed，向下滚动导航条隐藏，向上滚动导航条出现。

<template>
  <div id="demo">
    <!-- 淡入淡出动画 -->
    <transition name="fade">
      <!-- 导航条 -->
      <div v-show="show">
       内容省略
      </div>
    </transition>
</template>

<script>
export default {
  mounted() {
    //开始------------------------------------
    let oldTop = 0; //旧数据，初始为0
    // 将自定义方法绑定到窗口滚动条事件
    window.onscroll = () => {
      let top = document.scrollingElement.scrollTop; //触发滚动条，记录数值
      //旧数据大于当前位置，表示滚动条top向上滚动
      if (oldTop > top) {
        this.show = true;
        console.log("↑");
      } else {
        //相反...
        this.show = false;
        console.log("↓");
      }
      oldTop = top;//更新旧的位置
    };
    //结束------------------------------------
  },
  data: function() {
    return {
      show: true,
    };
  }
};
</script>

<style scoped>
//导航栏动画
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  height: 0;
}
</style>