建站
咨询
售后
建站咨询
vue滑动吸顶及锚点定位的用法
这篇文章主要讲解了vue滑动吸顶及锚点定位的用法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
沈北新ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！
Vue项目中需要实现滑动吸顶以及锚点定位功能。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滑动吸顶及锚点定位的用法
当前路径：http://lswzjz.com/article/iidgoo.html
