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 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
从0开始学Vue
Oct 27 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
JavaScript 中使用 Generator的方法
Dec 29 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
详解Vue 的异常处理机制
Nov 30 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
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
destoon官方标签大全
2014/06/20 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP实现微信对账单处理
2018/10/01 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python编写简单爬虫资料汇总
2016/03/22 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
护理专业的自荐信
2013/10/22 职场文书
初中三年学生的学习自我评价
2013/11/13 职场文书
财政局长自荐信范文
2013/12/22 职场文书
2014年三万活动总结
2014/04/26 职场文书