Sticky Nav Bar

jcontois · 10-05-2012, 03:29 PM

Hi,

I would like this idea: http://www.jay-han.com/tutorial/smart-sticky-nav/

implemented into my website design: http://d1074293.dotsterhost.com/crea...rk_2012-v2.asp

I am not sure if it is possible because I do not have divs sitting within divs but rather virtual objects.

can anyone help me reformat this code? the two divs I need to stay and then stick are portfolio-titles and logo .

Thanks so much!

Jenn

vwphillips · 10-05-2012, 05:04 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[*/

.parent {
  position:absolute;left:0px;top:200px;height:160px;width:800px;border:solid red  1px;
}

.start {
  position:absolute;left:500px;top:20px;width:300px;height:60px;background-Color:#FFCC66;
}

.fix {
  position:fixed;left:500px;top:0px;width:300px;height:60px;background-Color:#FFCC66;
}

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

<body>
<div class="parent" > <!-- any or no element -->
 <div id="tst" class="start" ></div>
</div>

<div style="height:5000px;" ></div>

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

function zxcFix(o){
 var obj=document.getElementById(o.ID),top=0;
 while(obj){
  top+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 obj=document.getElementById(o.ID);
 this.obj=obj;
 this.scls=obj.className;
 this.fcls=o.FixedClassName;
 this.top=top;
 this.a=document.createElement('A');
 obj.parentNode.insertBefore(this.a,obj);
 this.scroll();
}

zxcFix.prototype.scroll=function(){
  var o=this,t=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
  clearTimeout(o.dly);
  if (o.obj.className==o.scls&&t>o.top){
   document.body.appendChild(o.obj);
   o.obj.className=o.fcls;
  }
  if (o.obj.className==o.fcls&&t<o.top){
   o.obj.className=o.scls;
   o.a.parentNode.insertBefore(o.obj,o.a);
  }
  o.dly=setTimeout(function(){ o.scroll(); },100);
 }



new zxcFix({
 ID:'tst',
 FixedClassName:'fix'
})
/*]]>*/
</script>

</body>

</html>