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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python如何生成树形图案
2018/01/03 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python 爬虫的原理
2020/07/30 Python
举例讲解Python装饰器
2020/12/24 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
本科毕业自我鉴定
2014/03/20 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
爱心捐书倡议书
2015/04/27 职场文书
班主任寄语2016
2015/12/04 职场文书