//在mounted钩子函数里面注册scroll事件
mounted() {
this.$router.afterEach((to, from, next) => {
window.scrollTo(0, 0);
});
window.addEventListener("scroll", this.about);
},
methods: {
about: function() {
$(window).scroll(function() {
//判断元素到达当前窗口的什么位置(简介)
var isok = true;
//获取元素到浏览器顶端的距离
let wordcontent = document.getElementsByClassName("wordcontent")[0].offsetTop;
//获取页面滚动的距离
let t = document.documentElement.scrollTop || document.body.scrollTop;
//获取窗口的高度
let h = document.documentElement.clientHeight;
let isshow = wordcontent - t - h;
if (isshow < -100 && isok) {
$(".wordcontent")
.css("margin-top", "0")
.css("opacity", "0.8");
isok = false;
}
//判断元素到达当前窗口的什么位置(简介)
let isup = true;
let titlediv = document.getElementsByClassName("titlediv")[0].offsetTop;
let istitledivshow = titlediv - t - h;
if (istitledivshow < -100 && isup) {
$(".titlediv")
.css("margin-top", "0")
.css("opacity", "1");
isup = false;
}
//判断元素到达当前窗口的什么位置(四图)
let isfour = true;
let four = document.getElementsByClassName("four")[0].offsetTop;
let fourimg = four - t - h;
if (fourimg < -100 && isok) {
$(".four")
.css("margin-top", "0")
.css("opacity", "1");
isfour = false;
}
//判断元素到达当前窗口的什么位置(合作伙伴)
let isand = true;
let andtitle = document.getElementsByClassName("andtitle")[0].offsetTop;
let and = andtitle - t - h;
console.log(fourimg);
if (and < -100 && isand) {
$(".andtitle")
.css("margin-top", "0")
.css("opacity", "1");
isand = false;
}
});
}
},
//注销页面中的scroll
beforeDestroy() {
window.removeEventListener("scroll", this.about);
}
vue的页面跳转还会有上一个页面的scroll事件的影响,要在页面注销之前在beforeDestroy钩子函数里面注销掉scroll事件,每个页面原则上是只能有一个scroll事件