ふわっと上から現れるヘッダー

ハックツのCPのように画面をスクロールすると上からふわっと現れるヘッダーの作り方 まずテンプレート(html)

<template>
  <header class="header">
    <div v-scroll="headerAnim" class="header_close" :class="{ header_open: isAction}">
      <img src="logo.png">
      <p>ヘッダーに載せたい要素</p>
    </div>
  </header>
</template>

v-scroll="headerAnim" で「画面がスクロールされたときにheaderAnimを実行」 class="header_close" :class="{ header_open: isAction}" によってデフォルトだとheader_closeが適用されるがisActionがtrueのときはheader_openが適用される header_closeは消えるアニメーションで、openが降りてくるアニメーション

次にスクリプト(js)

<script>
export default {
  data () {
    return {
      isAction: false
    }
  },
  methods: {
    headerAnim (evt, el) {
      const changeLine = 500
      if (window.screenY <= changeLine) {
        this.isAction = false
      }
      if (window.scrollY > changeLine) {
        this.isAction = true
      }
    }
  }
}
</script>

if (window.screenY <= changeLine) { this.isAction = false }で「スクロール量が500以下ならisActionはfalse」としている。 スクロール量が500以上ならtrueに変わり、header_openが適用されるため、ヘッダーが降りてくる仕様。

最後にスタイル(scss)

<style lang="scss" scoped>
.header{
  width: 100%;
  height: 64px;
  position: fixed;
  top: 0;
  &_close{
    width: 100%;
    height: 100%;
    background-color: white;
    transition: 1s;
    transform: translate(0,-64px);
  }
  &_open{
    transition: 1s;
    transform: translate(0,0);
  }
  img{
    position: fixed;
    top: 17px;
    left: 24px;
  }
}
</style>

画面についていくようにpositionをfixedにしている。closeではheight分上に動かし、openでは0に戻している。transition: 1s;を付けることでふわっとした動きをしてくれるのでここのふわふわ具合はお好みで。