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 相关文章推荐
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
js实现微信聊天界面
Aug 09 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
在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 购物车的例子
2009/05/04 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php源码的使用方法讲解
2019/09/26 PHP
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
AngularJS基础知识笔记之表格
2015/05/10 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python通过实例讲解反射机制
2019/10/17 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
2013年入党人员的自我鉴定
2013/10/25 职场文书
运动会跳远加油稿
2014/02/20 职场文书
消防安全承诺书
2014/05/22 职场文书
工作态度怎么写
2015/06/25 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python