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 常用关键字列表集合
Dec 04 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
平面设计的岗位职责
2013/11/08 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
销售助理岗位职责
2015/02/11 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2015年国培研修感言
2015/08/01 职场文书
环境卫生标语
2015/08/03 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python
python_tkinter弹出对话框创建
2022/03/20 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js