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

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

代码如下：

 
 
 
 *{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;}
 


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

  
标题1
  
标题2
  
标题3
  
标题4
  
标题5
  
标题6
  
 
 
 

运行结果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。