Vue监听滚动实现锚点定位(双向)示例


Posted in Javascript onNovember 13, 2019

在项目需求中需要实现一个滚轴联动锚点的功能

效果图如下:

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;top: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监听滚动实现锚点定位(双向)示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue项目中锚点定位替代方式
Nov 13 #Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 #Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 #Javascript
jquery获取input输入框中的值
Nov 13 #jQuery
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 #Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 #Javascript
You might like
Terran剧情介绍
2020/03/14 星际争霸
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js实现日期级联效果
2014/01/23 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python批量查询域名是否被注册过
2017/06/21 Python
python requests指定出口ip的例子
2019/07/25 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
事业单位辞职信范文
2014/01/19 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
公司新年寄语
2014/04/04 职场文书
信息技术课后反思
2014/04/27 职场文书
数学教研活动总结
2014/07/02 职场文书
2014年调度员工作总结
2014/11/19 职场文书
2014年卫生工作总结
2014/11/27 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书