JSFiddle - React, Tailwind, and code Playground

by han_aru

HTML

<div id="app">
  <template>
    <transition>
      <div v-show="visible">
        <h1 id="header-logo">ここがフェードイン・アウトするよ</h1>
      </div>
    </transition>

    <p>フェー</p>
    <p>フェー</p>
    <p>フェー</p>
    <p>フェー</p>
    <p>フェー</p>
    <p>フェー</p>
    <p>フェー</p>
    <p>フェー</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>ドイン</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>アウト</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
    <p>するよ</p>
  </template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

CSS

#header-logo {
  position: fixed;
  top: 5%;
  left: 9%;
}

/* ヘッダーロゴ フェード処理ここから */
.v-enter {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}

.v-enter-to {
  opacity: 1;
}

.v-leave-to {
  opacity: 0;
  transition: opacity 1s;
}
/* ヘッダーロゴ フェード処理ここまで */

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      visible: false,
    };
  },
  created() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY;
      if (!this.visible) {
        this.visible = window.scrollY > 100;
      } else if (window.scrollY < 90) {
        this.visible = !this.visible;
      }
    },
  },
});