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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
用javascript实现给图片加链接
Aug 15 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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字符串处理的10个简单方法
2010/06/30 PHP
PHP内核探索之变量
2015/12/22 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP简单遍历对象示例
2016/09/28 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python解析xml模块封装代码
2014/02/07 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
绿化工程实施方案
2014/03/17 职场文书
幼儿园课题方案
2014/06/09 职场文书
买卖合同协议书范本
2014/10/18 职场文书
少先队工作总结2015
2015/05/13 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
入党申请书格式
2019/06/20 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python