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 相关文章推荐
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
token 机制和实现方式
Dec 15 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 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
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python定时器线程池原理详解
2020/02/26 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
消防器材管理制度
2014/01/28 职场文书
项目合作协议书
2014/04/16 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
消夏晚会主持词
2015/06/30 职场文书
学校财务管理制度
2015/08/04 职场文书
职工培训工作总结
2015/08/10 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
使用python创建股票的时间序列可视化分析
2022/03/03 Python