在移動或者app 中經常會用，頂部導航欄固定，但是隨著頁面向上滾動，導航欄的透明度發生變化。

做法為：

1、首先給要滾動變化的導航添加?

:style="style" <mt-header fixed title="個人中心" :style="style"><router-link to="/" slot="left" class="news_box"><mt-button style="overflow: visible;"><i class="iconfont news_icon">&#xe675;</i><span class="news_num">4</span></mt-button></router-link><router-link to="/" slot="right"><mt-button><i class="iconfont set_icon">&#xe61b;</i></mt-button></router-link></mt-header>

2、在 data ?數據中聲明需要的變量

data () {return {style: {},opacity: 0};},

3、變化樣式

(a): 基于 scroll 做的滾動的方法

created () {this.$nextTick(() => {this._initBody();});},methods: {_initBody () {this.mainBodyScroll = new BScroll(this.$refs.mainBody, {click: true,probeType: 3});this.mainBodyScroll.on('scroll', (pros) => {this.opacity = Math.abs(Math.round(pros.y)) / 250;this.style = {background: `rgba(43,162,251,${this.opacity})`}; });}}

(b)：沒有用框架的滾動，自然滾動

window.onscroll = ()=> {vm.opacity = window.pageYOffset / 250;vm.$store.commit('setHeadStyle', {background: `rgba(43,162,251,${vm.opacity})`});}

這樣便可以實現導航的漸變了。

同時有很多那種在滾動的時候出現的控制類的，例如高度滾動到什么地址的時候，某一個都東西固定不動了。

轉載于:https://www.cnblogs.com/haonanZhang/p/6994153.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的基于 vue2 导航栏透明渐变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。