在移动或者app 中经常会用，顶部导航栏固定，但是随着页面向上滚动，导航栏的透明度发生变化。

做法为：

1、首先给要滚动变化的导航添加 

:style="style"

             
                  
                       
                        
        4            
               
              
                  
                       
                    
               
          
     

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})`});        }

这样便可以实现导航的渐变了。

同时有很多那种在滚动的时候出现的控制类的，例如高度滚动到什么地址的时候，某一个都东西固定不动了。