...

View Full Version : Sticky Nav Bar



jcontois
10-05-2012, 04: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/creative-services/our-work_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, 06:04 PM
<!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.docume ntElement.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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum