vue 单页开发 当某个元素滚动出可视区域检测

先创建两个变量

isFixed: false,
offsetTop:0,

第一个：存储当前元素的可视状态

初始化函数里写检测代码

 mounted(){
                  window.addEventListener('scroll',this.initHeight);

                  this.$nextTick( () => {
                    this.offsetTop = document.querySelector('.menu').offsetTop;
                  })

                }

里面的 .menu 就是要监测元素的节点 根据需要修改

最后添加方法就行了

 initHeight () {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

this.isFixed = scrollTop > this.offsetTop ? true : false;
                  },

this.isFixed this.offsetTop 这个值的name根据你前面设置的变量名称来