70 lines
2.0 KiB
JavaScript
70 lines
2.0 KiB
JavaScript
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
menuCss: false,
|
|
menuActive: 0,
|
|
},
|
|
mounted() {
|
|
if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
|
|
AOS.init({
|
|
disable: "mobile",
|
|
duration: 600,
|
|
delay: 50,
|
|
easing: 'ease-in-out'
|
|
})
|
|
} else {
|
|
AOS.init({
|
|
disable: true,
|
|
duration: 600,
|
|
delay: 50,
|
|
easing: 'ease-in-out'
|
|
})
|
|
}
|
|
window.addEventListener('scroll', this.onScroll, false);
|
|
window.addEventListener("scroll", this.menuFixed);
|
|
},
|
|
mixins: [mixins],
|
|
methods: {
|
|
menuFixed() {
|
|
if (
|
|
!!document.documentElement.scrollTop &&
|
|
document.documentElement.scrollTop > 500 || document.body.scrollTop > 500
|
|
) {
|
|
this.menuCss = true;
|
|
} else {
|
|
this.menuCss = false;
|
|
}
|
|
},
|
|
onScroll() {
|
|
// 获取所有锚点元素
|
|
const navContents = document.querySelectorAll('main .call-menu')
|
|
// 所有锚点元素的 offsetTop
|
|
const offsetTopArr = []
|
|
navContents.forEach(item => {
|
|
offsetTopArr.push(item.offsetTop)
|
|
})
|
|
// 获取当前文档流的 scrollTop
|
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
|
// 定义当前点亮的导航下标
|
|
let navIndex = 0
|
|
for (let n = 0; n < offsetTopArr.length; n++) {
|
|
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
|
|
// 那么此时导航索引就应该是n了
|
|
if (scrollTop >= offsetTopArr[n] - 100) {
|
|
navIndex = n
|
|
}
|
|
}
|
|
this.menuActive = navIndex
|
|
},
|
|
// 跳转到指定索引的元素
|
|
scrollTo(index) {
|
|
var targetOffsetTop = document.getElementsByClassName("call-menu")[index].offsetTop;
|
|
var offsetTop = targetOffsetTop - 50;
|
|
if (screen.availWidth === 1280 && window.devicePixelRatio === 1.5) {
|
|
offsetTop = targetOffsetTop / 1.2 - 50
|
|
}
|
|
scrollTo(0, offsetTop);
|
|
}
|
|
}
|
|
});
|