vue滑动吸顶及锚点定位的示例代码
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了vue滑动吸顶及锚点定位的示例代码,代码简单易懂，非常不错对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
在上篇文章给大家介绍了vue实现吸顶、锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看
今天给大家继续分享vue滑动吸顶及锚点定位的代码，具体内容如下所示：
Vue项目中需要实现滑动吸顶以及锚点定位功能。template代码如下:
<template> <div class="main"> <div id='menu'> <ul> <li v-for="item in tabList" @click='clickTab'></li> </ul> </div> <div id='div1'></div> <div id='div2'></div> <div id='div3'></div> </div> </template>
(1)滑动吸顶:
监听scroll事件，获取页面的滚动距离，一旦滚动距离大于目标值，实现滑动吸顶功能。
public isFixed = false;
public mounted() {
this.menuTop = (document.getElementById('menu') as any).offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
public handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滑动距离
if (scrollTop < this.menuTop ) {
this.isFixed = false;
} else {
this.isFixed = true; // 设置fixed定位
}
}
public destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}
（2）锚点定位。点击tab，设置页面滚动距离。
public clickTab(index: number) {
this.activeIndex = index;
this.isFixed = true;
const menuHeight= (document.getElementById('menu') as any).offsetHeight;
const div1= (document.getElementById('div1') as any).offsetTop;
const div2= (document.getElementById('div2') as any).offsetTop;
const div3= (document.getElementById('div3') as any).offsetTop;
const div4= (document.getElementById('div4') as any).offsetTop;
switch (index) {
case 0: document.body.scrollTop = document.documentElement.scrollTop = div1 - menuHeight; break;
case 1: document.body.scrollTop = document.documentElement.scrollTop = div2 - menuHeight; break;
case 2: document.body.scrollTop = document.documentElement.scrollTop = div3 - menuHeight; break;
case 3: document.body.scrollTop = document.documentElement.scrollTop = div4 - menuHeight; break;
default: document.body.scrollTop = document.documentElement.scrollTop = div1- menuHeight;
}
}
总结
到此这篇关于vue滑动吸顶及锚点定位的示例代码的文章就介绍到这了,更多相关vue 滑动吸顶锚点定位内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！