当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue滑动吸顶及锚点定位的示例代码

vue滑动吸顶及锚点定位的示例代码

2020年06月13日  | 移动技术网IT编程  | 我要评论

在上篇文章给大家介绍了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 滑动吸顶锚点定位内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网