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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python 深入理解yield
2008/09/06 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python+requests接口自动化框架的实现
2020/08/31 Python
Internet体系结构
2014/12/21 面试题
四种会话跟踪技术
2015/05/20 面试题
护理毕业生自我鉴定
2014/02/11 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers