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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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 $_FILES中error返回值详解
2014/01/30 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
js JSON.stringify()基础详解
2019/06/19 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python异常的检测和处理方法
2018/10/26 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python绘制多个子图的实例
2019/07/07 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python定义一个Actor任务
2020/07/29 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
实习护理工作自我评价
2013/09/25 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
工作收入证明模板
2014/10/10 职场文书
县委务虚会发言材料
2014/10/20 职场文书
会计主管岗位职责
2015/04/02 职场文书
工程资料员岗位职责
2015/04/13 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python