Switching fixed elements when scrolling

I can’t find an example of what I am looking for but I’m pretty sure I have seen it!

When you scroll down a page the first heading stays fixed on the screen and when the second heading is scrolled too this then stays on the screen until the third heading is reached and so forth… Can this be done with jQuery?

if H2 is top of view port stay fixed until next H2 is top of view port?

guess it would be better to describe this scrolling effect as trailing headers?

the first header stays on screen until the next header is reached… this effect continues until scrolling to the bottom of the page has been reached… then when scrolling up effect works but in reverse… Can this be done?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.header {
  position:relative;width:100%;height:50px;background-Color:red;
}

.padding {
  position:relative;width:100px;height:500px;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function zxcFixHeader(cls){
 var oop=this,ary=this.bycls(cls,document),z0=0,fix;
 for (;z0<ary.length;z0++){
  fix=ary[z0].cloneNode(true);
  fix.style.position='fixed';
  fix.style.top='0px';
  fix.style.visibility='hidden';
  document.body.appendChild(fix);
  ary[z0]=[this.pos(ary[z0])[1],fix];
 }
 this.ary=ary;
 setInterval(function(){ oop.fix(); },100);
}

zxcFixHeader.prototype={

 fix:function(){
  var stop=this.stop(),ary=this.ary,z0=0,fix;
  for (;z0<ary.length;z0++){
   ary[z0][1].style.zIndex='100';
   ary[z0][1].style.visibility='hidden';
   if (!fix&&z0>0&&stop>ary[z0-1][0]&&stop<ary[z0][0]){
    fix=ary[z0-1][1];
    fix.style.zIndex='101';
    fix.style.visibility='visible';
   }
  }
 },

 stop:function(){
  if (window.innerHeight) return window.pageYOffset;
  else if (document.documentElement.clientHeight) return document.documentElement.scrollTop;
  return document.body.scrollTop;
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 bycls:function (nme,el){
  for (var reg=new RegExp('\\\\b'+nme+'\\\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 }

}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 new zxcFixHeader('header')
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>
<div class="header" >Header 1</div>
<div class="padding" ></div>
<div class="header" >Header 2</div>
<div class="padding" ></div>
<div class="header" >Header 3</div>
<div class="padding" ></div>
<div class="header" >Header 4</div>
<div class="padding" ></div>
<div class="header" >Header 5</div>
<div class="padding" ></div>
</body>

</html>