js实现页面导航层级指示效果


Posted in Javascript onAugust 25, 2020

我们上网经常看到一些页面层级指示的效果,比如淘宝、京东、百度百科等,用于指示用户浏览页面到哪里了。可以起到很好的交互效果,现在我们就来自己去实现以下类似的效果。主要用到的API是scrollIntoView 和 getBoundingClientRect方法,原理是监听页面滚动元素,当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口,就可以标识右边的指示栏。

js实现页面导航层级指示效果

代码如下:

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>H5 canvas绘制框选截图和保存截图代码</title>
 <style>
 *{padding:0;margin:0;}
 #scrollBox{margin:0 auto;width:1000px;}
 #scrollBox .scroll-tips{position:fixed;right:10px;top:300px;width:100px;}
 #scrollBox .scroll-tips li {cursor:pointer;text-align:center;}
 #scrollBox .scroll-tips li.active {background:#ccc;}
 #scrollBox .ct {height: 550px;line-height:550px;text-align:center;font-size:40px;color:#fff;background:green;}
 </style>
</head>
<body>
 <div id="scrollBox">
 <div class="main">
  <div class="content">
  <h2 id="title1" class="title-bar" data-id="1">标题1</h2>
  <div class="ct">内容1</div>
  </div>
  <div class="content">
  <h2 id="title2" class="title-bar" data-id="2">标题2</h2>
  <div class="ct" style="height:847px;">内容2</div>
  </div>
  <div class="content">
  <h2 id="title3" class="title-bar" data-id="3">标题3</h2>
  <div class="ct" style="height:547px;">内容3</div>
  </div>
  <div class="content">
  <h2 id="title4" class="title-bar" data-id="4">标题4</h2>
  <div class="ct" style="height:427px;">内容4</div>
  </div>
  <div class="content">
  <h2 id="title5" class="title-bar" data-id="5">标题5</h2>
  <div class="ct" style="height:187px;">内容5</div>
  </div>
  <div class="content">
  <h2 id="title6" class="title-bar" data-id="6">标题6</h2>
  <div class="ct" style="height:232px;">内容6</div>
  </div>
 </div>
 <div class="scroll-tips">
  <ul>
  <li id="Li1" class="active" data-id="1">标题1</li>
  <li id="Li2" data-id="2">标题2</li>
  <li id="Li3" data-id="3">标题3</li>
  <li id="Li4" data-id="4">标题4</li>
  <li id="Li5" data-id="5">标题5</li>
  <li id="Li6" data-id="6">标题6</li>
  </ul>
 </div>
 </div>
 <script>
 let Li = $$('.scroll-tips li');
 let scrollTips = $$('.title-bar');
 function $$(str) {
  return document.querySelectorAll(str);
 };
 for (let i = 0, len = Li.length; i < len; i++) {
  // 点击右侧标识点左侧滚动到窗口显示位置
  Li[i].onclick = function () {
  let id = this.getAttribute('data-id');
  $$('.scroll-tips li.active')[0].classList.remove('active');
  this.classList.add('active');
  $$('#title' + id)[0].scrollIntoView();
  };
 };
 // 获取当前页面滚动到浏览器视口顶部位置的元素
 const getScrollTop = function (domArr) {
  for (let i = 0, len = domArr.length; i < len; i++) {
  let top = domArr[i].getBoundingClientRect().top;
  // 表示在一定范围内允许的值
  if (top >= 0 && top <= 30) {
   return domArr[i];
  }
  }
 };
 // 监听滚动方法
 window.onscroll = function () {
  let LiId = getScrollTop(scrollTips) && getScrollTop(scrollTips).getAttribute('data-id');
  if (LiId) {
  $$('.scroll-tips li.active')[0].classList.remove('active');
  $$('#Li' + LiId)[0].classList.add('active');
  }
 };
 </script>
</body>
</html>

运行结果如下:

js实现页面导航层级指示效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
Javascript验证方法大全
Sep 21 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
js实现拖拽元素选择和删除
Aug 25 #Javascript
基于vue实现简易打地鼠游戏
Aug 21 #Javascript
vue实现打地鼠小游戏
Aug 21 #Javascript
js实现滑动进度条效果
Aug 21 #Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 #Javascript
vue组件开发之tab切换组件使用详解
Aug 21 #Javascript
vue组件开发之slider组件使用详解
Aug 21 #Javascript
You might like
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python定时任务 sched模块用法实例
2019/11/04 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
Python中and和or如何使用
2020/05/28 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
技能比赛获奖感言
2014/02/14 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
简短清晨问候语
2015/11/10 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
初中信息技术教学反思
2016/02/16 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis