基於 vue2 導航欄透明漸變

在移動或者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})`});
        }

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

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