Vue监听滚动实现锚点定位(双向)示例
网络编程 2021-07-04 15:02www.168986.cn编程入门
今天长沙网络推广大家分享一篇Vue监听滚动实现锚点定位(双向)示例,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
在项目需求中需要实现一个滚轴联动锚点的功能
效果图如下:
功能代码demo如下:
<template> <div class="container"> <div class="wrapper"> <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :key="index" :style="{'height':index==0?'1000px':'500px'}"> <div style="width:100%;height:100%;font-size:30px;text-align:center;font-weight:bold;color:#fff;" :style="{'background':item.backgroundcolor}">{{item.name}}</div> </div> </div> <div id="nac" style="height:500px;"></div> <nav style="position:fixed;right:30px;:300px;"> <a class="nav1" v-for="(item, index) in navList" :key="index" @click="jump(index)" :class="index==0?'current':''">{{item}}</a> </nav> </div> </template> <script> export default { data(){ return { scroll: '', list: [{ name: "第一条", backgroundcolor: "#90B2A3" }, { name: "第二条", backgroundcolor: "#A593B2" }, { name: "第三条", backgroundcolor: "#A7B293" }, { name: "第四条", backgroundcolor: "#0F2798" }, { name: "第五条", backgroundcolor: "#0A464D" }], navList: [1, 2, 3, 4, 5] } }, methods: { dataScroll: function () { this.scroll = document.documentElement.scrollTop || document.body.scrollTop; }, jump(index) { let jump = document.getElementsByClassName('section'); // 获取需要滚动的距离 let total = jump[index].offsetTop; // Chrome document.body.scrollTop = total; // Firefox document.documentElement.scrollTop = total; // Safari window.pageYOffset = total; // $('html, body').animate({ // 'scrollTop': total // }, 400); }, loadSroll: function () { var self = this; var $navs = $(".nav1"); var sections = document.getElementsByClassName('section'); for (var i = sections.length - 1; i >= 0; i--) { if (self.scroll >= sections[i].offsetTop - 100) { $navs.eq(i).addClass("current").siblings().removeClass("current") break; } } } }, watch: { scroll: function () { this.loadSroll() } }, mounted() { window.addEventListener('scroll', this.dataScroll); } } </script> <style> * { padding: 0; margin: 0; } .nav1 { display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; background: #eee; margin: 10px 0; } .current { color: #fff; background: red; } </style>
以上这篇Vue监听滚动实现锚点定位(双向)示例就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
上一篇:javascript操作元素的常见方法小结
下一篇:vue项目中锚点定位替代方式
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程