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 解析后的xml对象的读取方法细解
Jul 25 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
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
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
深入理解PHP中的global
2014/08/19 PHP
php实现的用户查询类实例
2015/06/18 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
原生js轮播特效
2017/05/18 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python 装饰器深入理解
2017/03/16 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
德国帽子专家:Hutshopping
2019/11/03 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
简历中的自我评价范文
2014/02/05 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
说明书怎么写
2014/05/06 职场文书
先进个人评语大全
2015/01/04 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
MySQL注入基础练习
2021/05/30 MySQL
Python中super().__init__()测试以及理解
2021/12/06 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技