VUE—屏幕向上滚动到一定高度，导航栏向上慢慢消失（动画）

Poppy_LYT

于 2020-07-09 10:40:54 发布

阅读量2.1k

点赞数 1

分类专栏： VUE CSS 文章标签：动画导航栏向上慢慢消失

本文链接：https://blog.csdn.net/poppy_lyt/article/details/107222893

版权

本文介绍了如何使用Vue.js结合CSS动画，在页面向上滚动到一定高度时，让导航栏逐渐淡出，实现平滑的用户体验。内容包括Vue组件的创建、滚动事件监听以及动画效果的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div ref="header" class="header-container"> // header 设置ref

mounted() {
   
    document.addEventListener('scroll', this.onScroll)
  },
  beforeDestroy() {
   
    document.removeEventListener('