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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Royal Resources 2011 | TEMPLATE</title>
<link href="http://www.hyundaigenerators.com.au/divs/css/template.css" rel="stylesheet" type="text/css" />
<link href="http://www.hyundaigenerators.com.au/divs/css/content.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
#sidebar {
overflow:hidden;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function zxcScroll(id){
var oop=this,p=document.getElementById(id),a=document.body.getElementsByTagName('A'),a=a[a.length-1],obj=p.getElementsByTagName('DIV')[0];
obj.style.position='relative',
this.p=p;
this.a=a;
this.obj=obj;
this.ptop=this.pos(p)[1];
this.atop=this.pos(a)[1]-this.ptop;
this.cross=this.atop-p.offsetHeight;
window.onscroll=function(){ oop.scroll(); }
}
zxcScroll.prototype={
scroll:function(){
var wwhs=this.wwhs(),ptop=this.ptop,atop=this.atop,cross=this.cross;
this.p.style.position=wwhs[3]<cross?'fixed':'absolute';
this.p.style.top=(wwhs[3]<cross?0:cross)+'px';
this.obj.style.top='0px';
if (wwhs[3]-ptop>1){
this.obj.style.top=(-this.obj.offsetHeight+this.p.offsetHeight)*Math.min((wwhs[3]-ptop)/(atop-wwhs[1]),1)+'px';
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
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];
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
new zxcScroll('sidebar');
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<!-- BOF main content container -->
<div id="main-width">
<!-- BOF HEADER -->
<div id="header">
<div>
<table width="1165px" cellpadding="0px" cellspacing="0px">
<tr>
<td width="380px"> </td>
<td align="center"><img src="http://www.hyundaigenerators.com.au/divs/images/royal_resources_logo.png" border="0px" alt="Royal Resources" /></td>
<td width="380px" align="right" valign="bottom"><img src="http://www.hyundaigenerators.com.au/divs/images/icon_email.png" border="0px" alt="Email" /> <img src="http://www.hyundaigenerators.com.au/divs/images/icon_phone.png" border="0px" alt="Email" /></td>
</tr>
</table>
</div>
<!-- BOF NAVIGATION -->
<div id="nav">
navigation here
</div>
<!-- EOF NAVIGATION -->
</div>
<!-- EOF HEADER -->
<div id="main-content">
<!-- BOF SIDEBAR -->
<div id="sidebar">
<div>Note the anchor at the bottom of the page
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />113
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />113
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1134
</div>
</div>
<div style="clear:left;"></div>
<!-- EOF SIDEBAR -->
<!-- BOF SCROLL CONTENT -->
<div id="scrollable">
<table width="790px" cellpadding="0px" cellspacing="0px" align="right">
<tr>
<td>
<img src="http://www.hyundaigenerators.com.au/divs/images/banner_place-holder.jpg" border="0px" />
</td>
</tr>
<tr>
<td>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</td>
</tr>
<tr>
<td width="790px" height="300px" style="border:1px solid #FFFFFF;">
FOOTER CONTENT HERE
</td>
</tr>
</table>
</div>
<!-- EOF SCROLL CONTENT -->
</div>
<div > </div>
</div>
<a> </a>
<!-- EOF main content container -->
</body></html>
sticky AND scrolling divs??
Reply With Quote
Bookmarks