PDA

View Full Version : On scroll header collapse to smaller sticky header



danielmeade
07-16-2011, 06:04 PM
Hi, I'm presuming this is done using Javascript, forgive me if I have posted this in the wrong section.

Trying to create a header that collapses to a smaller, sticky version as soon as the user scrolls past the bottom of the main header.

For a better understanding of what I am trying to achieve see an example on the TechCrunch (http://techcrunch.com) redesign

Any help on this or a point in the right direction would be greatly appreciated.

Thanks!

vwphillips
07-17-2011, 08:03 AM
It is CSS


<!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 {
left:0px;top:0px;width:100%;height:280px;
}

.float {
position:fixed;z-Index:1000;left:0px;top:0px;width:100%;height:50px;
}

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

<body>
<img class="header" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" />

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

<img class="float" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />


</body>

</html>

danielmeade
07-17-2011, 09:08 AM
Hi Vic,

Thanks for that. I'm not quite sure you understand what I am after though. The script you have written above applies a fixed header.

However I am looking to create header that is say 100px in height, when a user scrolls down as soon as that 100px has been reached the header then converts into a smaller header (say 35px) and remains sticky to the top of the page until the user return back to the very start.

The best example of this can be seen at giglocator.com (http://giglocator.com)

Thanks again for your help,

vwphillips
07-17-2011, 12:28 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[*/
.header {
left:0px;top:0px;width:100%;height:280px;
}

#float {
position:absolute;z-Index:1000;left:0px;top:100px;width:100%;height:100px;border:solid red 1px;
}

#float IMG{
position:absolute;z-Index:1000;left:0px;top:0px;width:100%;height:100%;
}

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

<body>

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

<div id="float">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</div>

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

function Float(o){
var oop=this,obj=document.getElementById(o.ID);
this.obj=obj;
this.top=obj.offsetTop;
this.max=obj.offsetHeight;
this.min=o.MimimumSize||this.max;
setInterval(function(){ oop.fix(); },50);
}

Float.prototype={

fix:function(){
var wwhs=this.wwhs();
this.obj.style.top=(wwhs[3]>this.top?0:this.top)+'px';
this.obj.style.height=(wwhs[3]>this.top?this.min:this.max)+'px';
this.obj.style.width=wwhs[0]+'px';
this.obj.style.position=wwhs[3]>this.top?'fixed':'absolute';
},

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


}

new Float({
ID:'float',
MimimumSize:35
});

/*]]>*/
</script>
</body>

</html>