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模块模式分析
May 16 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 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分页函数代码(简单实用型)
2010/12/02 PHP
php文件操作实例代码
2012/05/10 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python监控键盘输入实例代码
2018/02/09 Python
深入理解Python异常处理的哲学
2019/02/01 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python 求向量的余弦值操作
2021/03/04 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
三字经教学反思
2014/04/26 职场文书
应届生求职信
2014/05/31 职场文书
不错的求职信范文
2014/07/20 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Nginx安装配置详解
2022/06/25 Servers
vue实现简易音乐播放器
2022/08/14 Vue.js