实现多个标题的吸顶
 

  
header1
  
1
  
1
  
1
  
1
  
1
  
1
 
 
 
 
 

  
header5
  
1
  
1
  
1
  
1
  
1
  
1
 
 
 

var box = document.getElementsByClassName('box'), //获取所有需要吸顶效果的标题
  section = document.getElementsByTagName('section'); //获取所有子列表，后面有用

var ot = [],  //存储每个标题的offsetTop
  len = box.length;   //标题的个数

for(let i=0; i

window.Onscroll= function () {
 //获取滚动的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; iot[i] && st

//获取最后一个子列表的高度，为了设置最后一个吸顶标题的位置
//section[len-1].getBoundingClientRect().height
//此方法返回一个number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);

var box = document.getElementsByClassName('box'), //获取所有需要吸顶效果的标题
 section = document.getElementsByTagName('section'); //获取所有子列表
 
var ot = [],       //存储每个标题的offsetTop
 len = box.length;   //标题的个数
 
for(let i=0; iot[i] && st