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 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

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[*/
.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

Thanks again for your help,

**vwphillips** · 07-17-2011, 12:28 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[*/
.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>

Thread: On scroll header collapse to smaller sticky header

Thread Tools

Search Thread

On scroll header collapse to smaller sticky header

Bookmarks

Bookmarks

Posting Permissions