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显示隐藏层比较不错的方法分析
Sep 30 Javascript
javascript判断office版本示例
Apr 11 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
教你部署vue项目到docker
Apr 05 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
基于文本的访客签到簿
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python正则表达式爬取猫眼电影top100
2018/02/24 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python实现图片压缩代码实例
2019/08/12 Python
python类的实例化问题解决
2019/08/31 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
PHP面试题附答案
2015/11/28 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
大一新生军训新闻稿
2015/07/17 职场文书