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 相关文章推荐
基于jquery封装的一个js分页
Nov 15 Javascript
js获取ajax返回值代码
Apr 30 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
微信小程序合法域名配置方法
May 06 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
js实现3D旋转效果
Aug 18 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
JS实现百度搜索框
2021/02/25 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
python类继承用法实例分析
2015/05/27 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
施工班组长岗位职责
2014/01/05 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Django drf请求模块源码解析
2021/06/08 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python