// 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;
}