【Nav Nav bar displays fade in and out effect according to the scroll bar direction. 】

purpose

This code basically accomplishes this: the Nav Nav bar shows the effect of fading in and out according to the direction of the scroll bar. Nav is fixed, scroll down to hide, scroll up to appear.

<template>
  <div id="demo">
    <! -- Fade-out animation -->
    <transition name="fade">
      <! -- Navigation bar -->
      <div v-show="show">Content to omit</div>
    </transition>
</template>

<script>
export default {
  mounted() {
    // Core start ------------------------------------
    let oldTop = 0; // Old data, starting with 0
    // Bind custom methods to window scrollbar events
    window.onscroll = () = > {
      let top = document.scrollingElement.scrollTop; // Trigger the scroll bar to record the value
      // The old data is greater than the current position, indicating that the scrollbar top is scrolling up
      if (oldTop > top) {
        this.show = true;
        console.log("Write");
      } else {
        / / on the contrary...
        this.show = false;
        console.log("Left");
      }
      oldTop = top;// Update the old location
    };
    // Core end ------------------------------------
    //
    // Current position 60
    //
    // Old > New =↑
    //
    // The old position is 90
    //
  },
  data: function() {
    return {
      show: true}; }};</script>

<style scoped>// Navigation bar animation.fade-enter-active..fade-leave-active {
  transition: all 0.5 s;
}
.fade-enter..fade-leave-to /*.fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  height: 0;
}
</style>
Copy the code