(jQuery?) Table of contents which highlight section currently being viewed

**eneles** · 04-26-2013, 07:43 AM

Hi,

Was wondering how I can accomplish what's done on the Steam Community website with the "Guide Index" feature

As you scroll down the page, a "selected" class is given to the DIV in the Guide Index corresponding to the section being viewed.

I'm a designer, not a developer. I can work with jQuery, but can't code anything from scratch. Was wondering if there was some sort of plugin I can use on my website to achieve the desired outcome? Pretty sure it detects the viewpoint reaching the corresponding IDs of the sections (sounds relatively simple), but there's no way I'd be able to code something by myself though.

Thanks in advance.

**vwphillips** · 04-26-2013, 01:43 PM

Code:

<!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[*/
.anchor {
  font-Size:20px;
}

#float {
  position:fixed;z-Index:101;right:20px;top:50px;width:200px;height:200px;background-Color:#FFFFCC;border:solid red 1px;
}

#float .anchor {
  position:relative;left:5px;top:50px;width:180px;height:20px;margin-Top:5px;padding-Left:10px;background-Color:#CCFFCC;border:solid red 1px;font-Size:14px;
}

#float .active {
 background-Color:#FFCC66;
}

.section {
  position:relative;left:0px;top:0px;width:100%;height:700px;background-Color:#FFFFCC;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<div class="section" >
 <div class="anchor">section 1</div>
</div>
<div class="section" >
 <div class="anchor">section 2</div>
</div>
<div class="section" >
 <div class="anchor">section 3</div>
</div>
<div id="float" >
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Float Navigation ~(26-April-2013) DRAFT
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcFloatNav={

 init:function(o){
  var id=o.ID,cls=o.AnchorClass,acls=o.ActiveClass,ms=o.ScrollSpeed,ms=typeof(ms)=='number'&&ms>20?ms:1000,obj=document.getElementById(id),ds=document.getElementsByTagName('DIV'),ary=[],c,z0=0,z1=0;
  if (obj){
   for (;z0<ds.length;z0++){
    if ((' '+ds[z0].className+' ').match(' '+cls+' ')){
     ary.push(ds[z0]);
    }
   }
   for (;z1<ary.length;z1++){
    c=ary[z1].cloneNode(true);
    obj.appendChild(c);
    cls=ary[z1].className;
    ary[z1]=[ary[z1],c,cls,cls+' '+acls,ms];
    this.addevt(c,'mouseup','scrollto',ary[z1]);
   }
   o.ary=ary;
   this.addevt(window,'scroll','scroll',o);
   this.scroll(o);
  }
 },

 scroll:function(o){
  for (var nu=0,z0=0;z0<o.ary.length;z0++){
   o.ary[z0][1].className=o.ary[z0][2];
   (this.pos(o.ary[z0][0])[1]-this.wwhs()[3]-this.wwhs()[1]/2)<0?nu=z0:null;
  }
  o.ary[nu][1].className=o.ary[nu][3];
 },

 scrollto:function(a){
  this.animate(this.wwhs()[3],this.pos(a[0])[1],new Date(),a[4],Math.PI/(2*a[4]))
 },

 animate:function(f,t,srt,mS,i){
  var oop=this,ms=new Date().getTime()-srt,n=(t-f)*Math.sin(i*ms)+f;
  clearTimeout(oop.dly);
  if (isFinite(n)){
   window.scrollTo(0,n);
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,i); },10);
  }
  else {
   window.scrollTo(0,t);
  }
 },

 wwhs:function(){
  if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
  else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
  return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
  }
 },

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

}

zxcFloatNav.init({
 ID:'float',
 AnchorClass:'anchor',
 ActiveClass:'active',
 ScrollSpeed:1000
});

/*]]>*/
</script>

</body>

</html>