// html部分

        <transition name="slide-fade">
           <div class="head" v-if="show"></div>
        </transition>

// js部分
        mounted(){
            window.addEventListener('scroll',this.handleScroll)
        },
        methods:{
            handleScroll () {
                var scrollTop = document.documentElement.scrollTop ||     document.body.scrollTop
                scrollTop>200 ? this.show=true :　this.show=false
            },
        }

 

//css部分

        .slide-fade-enter-active {
           animation: bounce-in .5s;
        }
        .slide-fade-leave-active {
          animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 0.6;
          }
          100% {
            opacity: 1;
          }
        }
        .head{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: yellow;
        }