vue滑动吸顶及锚点定位的用法-成都快上网建站

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://kswjz.com/article/iidgoo.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流