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关闭本窗口不弹出询问框的方法
Sep 12 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
js倒计时抢购实例
Dec 20 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
js性能优化技巧
2015/11/29 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
用Python读取几十万行文本数据
2018/12/24 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
抵押贷款承诺书
2014/05/30 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
银行求职自荐信
2014/06/30 职场文书
监守自盗观后感
2015/06/10 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers