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学习笔记(一) 在html中使用javascript
Jun 18 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
vuex与组件联合使用的方法
May 10 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP数组操作类实例
2015/07/11 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python 远程开关机的方法
2020/11/18 Python
python脚本定时发送邮件
2020/12/22 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
高中体育教学反思
2014/01/29 职场文书
写给老婆的检讨书
2014/02/21 职场文书
出纳工作检讨书
2014/10/18 职场文书
公务员考察材料范文
2014/12/23 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
《窃读记》教学反思
2016/02/18 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL