vue使用原生js实现滚动页面跟踪导航高亮的示例代码


Posted in Javascript onOctober 25, 2018

需要使用vue做一个专题页面。滚动页面指定区域导航高亮。

监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换。

我使用的方法是在定位元素上添加id,在导航添加data-id属性,监听滚动事件,如果当前滚动区域大于定位元素区域,将元素的id赋值给变量,然后与导航的data-id进行匹配,切换class。

html结构

main.vue

<template>
 <div class="qz-home">
  <div class="quiz-container">
   <div class="quiz-ad-pic" id="pagetop"></div>
   <div class="quiz-main">
    <div class="quiz-main-inside" id="js-content">
     <quiz-sessions class="item" id="quizhall"></quiz-sessions>
     <quizRecords class="item" id="quizrecord"></quizRecords>
     <quiz-history class="item" id="quizHistory"></quiz-history>
     <quiz-mine class="item" id="quizMine"></quiz-mine>
     <quiz-rank class="item" id="quizRank"></quiz-rank>
     <quiz-rule class="item" id="quizRule"></quiz-rule>
    </div>
   </div>
   <navigation id="js-nav"></navigation>
  </div>
 </div>
</template>

navigation.vue

<template>
 <nav class="nav-container">
  <div class="nav-mark"></div>
  <div class="nav-main">
   <ul class="nav-list">
    <li :class="{'cur': curindex === index}" v-for="(item, index) in navList" :key="index" :data-id="item.id"><a @click="linkTo(item.id, index)">{{item.name}}</a></li>
   </ul>
   <div class="backtop" @click="backTop()">
    <a></a>
   </div>
  </div>
 </nav>
</template>

javascript

export default {
 name: "Navigation",
 data() {
  return {
   navList: [
    { name: "竞猜大厅", id: "quizhall" },
    { name: "竞猜记录", id: "quizrecord" },
    { name: "历史赛事", id: "quizHistory" },
    { name: "我的竞猜", id: "quizMine" },
    { name: "排行榜", id: "quizRank" },
    { name: "玩法", id: "quizRule" }
   ],
   curindex: 0
  };
 },
 mounted() {
  this.initScroll();
 },
 methods: {
  initScroll() {
   window.addEventListener('scroll', function() {
    // 封装类名函数集:判断、移除、增加、获取(简单粗暴版);
    function removeClass(obj, cls) {
     if (obj.className == cls) {
      obj.className = "";
     }
    }
    function addClass(obj, cls) {
     if (obj.className != cls) {
      obj.className = cls;
     }
    }

    let pos = document.documentElement.scrollTop;
    if (pos > 300) {
     document.querySelector('.nav-container').style.display = 'block';
    } else {
     document.querySelector('.nav-container').style.display = 'none';
    }
    var menus = document.getElementById("js-nav").getElementsByTagName("li");
    var items = document.getElementById("js-content").querySelectorAll(".item");
    var currentId = "";
    
    for (var i = 0; i < items.length; i++) {
     var _item = items[i];
     var _itemTop = _item.offsetTop;
     if (pos > _itemTop - 200) {
      currentId = _item.id;
     } else {
      break;
     }
    }
    if (currentId) {
     for (var j = 0; j < menus.length; j++) {
      var _menu = menus[j];
      // href属性获取的是整个link,需以#为界截除获取最后一个元素;
      var _href = _menu.getAttribute('data-id');
      if (_href != currentId) {
       removeClass(_menu, "cur");
      } else {
       addClass(_menu, "cur");
      }
     }
    }
   })
  }
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
小程序云开发实战小结
Oct 25 Javascript
详解小程序云开发数据库
May 20 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
React实现评论的添加和删除
Oct 20 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 #Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 #Javascript
使用ECharts实现状态区间图
Oct 25 #Javascript
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
详解js访问对象的属性和方法
Oct 25 #Javascript
深入浅析js原型链和vue构造函数
Oct 25 #Javascript
AngularJS 多指令Scope问题的解决
Oct 25 #Javascript
You might like
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
jQuery each()小议
2010/03/18 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
施工班组长岗位职责
2014/01/05 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
机关会计岗位职责
2014/04/08 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
民政工作个人总结
2015/02/28 职场文书
民间借贷借条范本
2015/05/25 职场文书
欠条范文
2015/07/03 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
详解mysql三值逻辑与NULL
2021/05/19 MySQL
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
vue中data里面的数据相互使用方式
2022/06/05 Vue.js