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

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

代码如下:

<!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>

运行结果如下:

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

时间: 2020-08-19

Javascript实现页面滚动时导航智能定位

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di

vue使用原生js实现滚动页面跟踪导航高亮的示例代码

需要使用vue做一个专题页面.滚动页面指定区域导航高亮. 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换. 我使用的方法是在定位元素上添加id,在导航添加data-id属性,监听滚动事件,如果当前滚动区域大于定位元素区域,将元素的id赋值给变量,然后与导航的data-id进行匹配,切换class. html结构 main.vue <template> <div class="qz-hom

JS仿hao123导航页面图片轮播效果

hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi

js仿小米官网图片轮播特效

小米官网给我的感觉是大气.干净.很多特效的加入让人觉得耳目一新,big满满. 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个. 大致的感觉出来了,贴个图先: 通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示.隐藏. 截图如下(红框内的opacity属性): 好的,实现的手段知道了,那么页面布局先搞出来. <!DOCTYPE

基于Swiper实现移动端页面图片轮播效果

使用Swiper开发移动端页面,轻松实现图片的轮播. swiper 1.主要包含模块: swiper:指滑动.切换(整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡)) container:指容器(swiper的容器里面包括滑动快(slide)的集合(wrapper).分页器(pagination).前进按钮等) wrapper:指包含(触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移) slider:指滑块(切换的块中的一个,可以包含文字.图片.ht

jQuery实现仿路边灯箱广告图片轮播效果

特效介绍 本图片幻灯就像路边灯箱广告,路边大广告牌效果,LED切换效果,并且会一直保持在页面最低端. 演示图 使用方法 1.在head区域引入style.css. 复制代码 代码如下: <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/> 2.html代码放在</body>上面: <div cla

Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)

在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car

js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

js实现图片轮播效果学习笔记

本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过

基于cssSlidy.js插件实现响应式手机图片轮播效果

cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap

js实现图片轮播效果

本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati

基于JavaScript实现仿京东图片轮播效果

js实现仿京东图片轮播效果,当鼠标划在窗口上面停止计时器,鼠标离开窗口,开启计时器,鼠标划在页签上面,停止计时器,手动切换,通过定义计时器封装函数run,封装函数changeOption,实现此效果,代码简单易懂,需要的小伙伴直接复制拷贝转走吧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<