当页面元素出现在浏览器可视区域时才触发该动画样式

原理：通过比较可视区域的高度 innerHeight与该元素近距离可视区域顶部的距离的大小关系来决定是否触发（类名的增加与删除）默认一个页面只能同时存在一个window.onscroll函数.

注意：具体的参数计算要根据自己的实际情况进行选取，而且最好将目标元素在控制台打印出来，到其原型链上寻找目标属性，避免出现null或者undefined即目标元素属性为空的情况

案例：当目标元素滚动到可视区域顶部时，固定在可视区域顶部，层级变大，否则清除该样式

一：methods中定义此方法，

showDiv() {
//获取滚动条距离页面顶部的距离，如果滚动条距离页面距离大于目标元素距离页面顶部的距离，则目标元素已经往上滚动，且超出了当前可视区域，则给该元素添加fixed属性
var scroolTop= document.documentElement.scrollTop; 
if(scroolTop>=this.divTop){
document.getElementsByClassName('secondDiv')[0].classList.add('fixedTop');
console.log('添加样式');
}else{
console.log('清除样式');
document.getElementsByClassName('secondDiv')[0].classList.remove('fixedTop');};
}

二：在mounted中获取目标元素距离页面顶部的距离 this.divTop ，紧接着给浏览器的滚动条绑定该事件，当页面滚动时触发该事件.

this.divTop = document.getElementsByClassName('secondDiv')[0].offsetTop ;
window.onscroll = this.showDiv; //当页面滚动时触发该事件

三：在style中定义自己需要的样式即可，注意选择器的优先级，最好加！important