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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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匿名函数(闭包函数)详解
2019/03/22 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
用Python逐行分析文件方法
2019/01/28 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
班级入场式解说词
2014/02/01 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
税务会计岗位职责
2014/02/18 职场文书
《穷人》教学反思
2014/04/08 职场文书
遗产继承公证书
2014/04/09 职场文书
目标责任书范本
2014/04/16 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
工伤私了协议书范本
2014/11/24 职场文书