vue实现导航标题栏随页面滚动渐隐渐显效果

本文主要是介绍vue实现导航标题栏随页面滚动渐隐渐显效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的，下面作一个用vue实现此功能的代码分享。

1. 为导航栏元素style属性用v-bind绑定data数据"opacityStyle"。

<div class="header" :style="opacityStyle">景点详情   //内容我就简约了，实际开发以需求为准
</div>

2. data中定义opacityStyle，数据内容是opacity透明度属性，设置为0。

data() {return {opacityStyle:{ opacity:0 }}
}

3. 监听scroll事件并执行相应方法，一般我习惯在activated生命周期时开始监听(activated是keepAlive属性下产生的一个生命周期，在进入页面时)。

activated(){window.addEventListener('scroll',this.handleScroll)
}

4. 设计handleScroll()方法。通过获取scroll滚动偏移值，指定数值对opacity属性进行计算，让透明度联动变化。

methods:{handleScroll(){const top = document.documentElement.scrollTop //获取scroll偏移值if(top > 45 && top <= 150){   //实际按需求取范围const opacity = top / 150    //对opacity作计算，透明度从起始到1随偏移值而改变this.opacityStyle = {opacity}   //实时返回给opacityStyle}}
}

5. 对scroll监听进行解绑。刚刚在activated()中执行监听，同样的我们在deactivated()中移除监听。这一步很重要，很多人都会忽略，如果不解除将可能影响到其他页面的scroll行为，导致项目产生bug。

deactivated(){window.removeEventListener('scroll',this.handleScroll)
}

以上是vue实现页面滚动显隐导航栏功能的代码和逻辑，有疑惑例如keepAlive用法等不明白的地方可查看文档另外学习~

这篇关于vue实现导航标题栏随页面滚动渐隐渐显效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---