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

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

js实现页面导航层级指示效果_第1张图片

代码如下:



 
 H5 canvas绘制框选截图和保存截图代码
 


 

标题1

内容1

标题2

内容2

标题3

内容3

标题4

内容4

标题5

内容5

标题6

内容6
  • 标题1
  • 标题2
  • 标题3
  • 标题4
  • 标题5
  • 标题6

运行结果如下:

js实现页面导航层级指示效果_第2张图片

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

你可能感兴趣的:(js实现页面导航层级指示效果)