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


Posted in Javascript onMay 10, 2020

在上篇文章给大家介绍了vue实现吸顶、锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看https://3water.com/article/172365.htm

今天给大家继续分享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 滑动吸顶锚点定位内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 #Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 #Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 #Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 #Javascript
JavaScript 装逼指南(js另类写法)
May 10 #Javascript
js中!和!!的区别与用法
May 09 #Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 #Javascript
You might like
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
毕业论文致谢范文
2015/05/14 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
个人催款函范文
2015/06/24 职场文书
英语教学课后反思
2016/02/15 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS