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 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
javascript string字符串优化问题
Jul 31 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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代码
2008/09/10 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
JavaScript数组去重算法实例小结
2018/05/07 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
岗位职责的含义
2013/11/17 职场文书
专升本个人自我评价
2013/12/22 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
法人代表委托书
2014/04/04 职场文书
爱之链教学反思
2014/04/30 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL