header添加动效，滑动置顶变透明，下拉吸顶变回原样

灵感来源

昨天无聊看了下大疆的官网，发现他们的网站做的很好看，交互也很棒，头部的header动效交互，宣传语的动态显示，具体效果参考大疆官网h5，于是我打算模仿他做一个动态交互的header。

制作思路

1. 先去vant上选取一个公共头部样式，还有几个swipe轮播图（模仿大疆，并撑起高度方便上下滑动）
2. 有了高度便可以滚动，添加监听事件，当滚到顶部的时候，切换样式
3. 于是我们需要再给头部添加两种不同的样式，三元运算绑定样式，方便来回切换
4. 样式来回切换有些生硬，需要添加动效，增加体验

具体实现步骤

1. 基本的代码片段，头部样式和轮播图

<template>
  <div class="home">
    <!-- 头部 -->
    <nav>
      <van-nav-bar title="标题" left-arrow :fixed='true'>
      </van-nav-bar>
    </nav>
    <!-- 主体内容 -->
    <div class="home-main">
      <!-- 轮播图 -->
      <section>
        <van-swipe :autoplay="6000" @change="onChange()">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </section>
      <section>
        <van-swipe :autoplay="6000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </section>   
      <section>
        <van-swipe :autoplay="6000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      scrollTop:0,
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-1.jpg',
      ],
    };
  },
}
</script>

<style lang="less" scoped>
.home {
  section {
    margin-bottom: 20px;
    .van-swipe-item {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>

2. 添加滚动的监听事件，这里注意添加了监听事件，记得销毁

 data() {
    return {
      headershow:false,
      scrollTop:0,
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-1.jpg',
      ],
    };
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods:{
    handleScroll() {
      this.scrollTop = document.documentElement.scrollTop || 0
      if(this.scrollTop <= 0){
        this.headershow = false
      }else if(this.scrollTop >= 0 && !this.headershow){
        this.headershow = true
      }
    }
  }

3. 添加样式，绑定类名

    .show-white {
      opacity: 1;
    }
    .show-transparent {
      height: 60px;
      opacity: 0;
    }

要是觉得样式不够明显，可以改背景色

:class="headershow ? 'show-white' : 'show-transparent'"

4. 添加动画效果过度，transition的用法可以参考这里

    .show-white {
      opacity: 1;
      transition: opacity 0.5s, height 0.8s;
    }
    .show-transparent {
      height: 60px;
      opacity: 0;
      transition: opacity 0.8s, height 1s;
    }

结束

如果您看到了最后，对文章有任何建议，都可以在评论区留言
前端新手，请大佬多多包涵，指点迷津。