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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 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
一步一步学习PHP(8) php 数组
2010/03/05 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP的几个常用加密函数
2016/02/03 PHP
javascript 数组排序函数
2009/08/20 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
简单的辞职信范文
2014/01/18 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
大学毕业寄语大全
2014/04/10 职场文书
运动会主持人开幕词
2016/03/04 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript